React項目搭建

搭建react項目的兩種方法

一. 利用create-react-app (項目react-one-app)

先安裝 cnpm install -g create-react-app
安裝後搭建 create-react-app (項目名稱不能用大寫,能夠用小駝峯-例如: create-react-app react-one)


缺點:
    1. 搭建比較慢,網速慢的會很是的慢
    2. 東西太過集成,webpack之類的包都在node_modules裏邊,不容易配置webpack的操做
優勢:
    1. 無需配置: 官方的配置,幾乎完美不須要再進行修改,能夠直接上手項目
    2. 高集成性: 集成了React, ES6, JSX和Flow的支持
    3. 自帶服務: 集成了開發服務器,方便預覽調試
    4. 熱更新:   保存自動更新
    5. 全兼容性: 自動處理CSS兼容問題,無需手動添加-webkit-前綴
    6. 自動發佈: 集成了發佈功能, 編譯後直接發佈, 幷包含了調試的sourcemaps功能

二. 結合webpack的 generator-react-webpack (項目react-two-app)

須要先安裝yeoman  cnpm install -g yo
安裝工具 cnpm install -g generator-react-webpack

安裝後搭建
    先建立文件  mkdir react-tow-react
    切換       cd react-two-react
    安裝搭建   yo react-webpack

缺點:
    1. 須要依靠yeoman安裝
優勢:
    1. 基於webpack搭建,易於修改配置內容
    2. 支持ES6,集成了Bebel-loader
    3. 支持不一樣風格CSS(CSS,Less,Sass,Stylus)
    4. 集成語法檢測ESLint功能
    5. 能夠輕鬆配置單元測試

三. 利用webpack本身配置搭建React環境 (項目 react-three-app)

**沒有安裝cnpm的朋友能夠安裝下,安裝配置快一些**
npm install -g cnpm --registry=https://registry.npm.taobao.org

(對webpack的詳細不作過多解釋在此處,對webpack不瞭解的朋友能夠到
webpack中文網站: https://doc.webpack-china.org/concepts/
也能夠到其餘技術博客查看    )
1. npm init -y 
    而後建立文件,文件結構爲

2. cnpm install --save-dev webpack
    配置webpack.congig.js(website的地址根據本身的config配置)

此處對website的配置適用於學習,項目中應用須要配置開發模式和生產模式

3. 安裝服務 cnpm install --save-dev webpack-dev-server
    配置package.json 配置打包(npm run build)和運行(npm run dev)的執行命令

此處對的配置適用於學習,項目中應用須要配置開發模式和生產模式 (windows注意描述)

4. 配置 html的打包
      安裝 cnpm install --save-dev html-webpack-plugin
      配置 在webpack.congfig.js

5. 配置sass樣式處理 
    安裝 style-loader css-loader node-sass sass-loader 四個配置能夠單獨安裝
    cnpm install --save-dev style-loader css-loader node-sass sass-loader  
    配置 sass 在webpack.config.js 中module裏邊的rules

6. 配置 es6和jsx語法解析
    安裝  babel-core babel-loader babel-preset-env babel-preset-react
    cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
   配置在webpack.config.js 中module裏邊的rules

新建文件並配置

7. 配置react  
    安裝 react react-dom
    cnpm install --save-dev react react-dom

這步完成後能夠製做一些小dom和組件了

---

接下來的是對圖片的打包以及css的優化

1. 配置打包背景圖片(背景圖片和html內部img的圖片打包不同)
    安裝 file-loader url-loader
    cnpm install --save-dev 

2. 配置打包html的img圖片

    安裝 cnpm install --save-dev html-withimg-plugin
    
3. 配置CSS分離
    安裝 cnpm install --save-dev extract-text-webpack-plugin
 
4. 配置消除多餘CSS
    安裝 purifyCSS-webpack和purify-css

/*/
yeoman 是Google和第三方開發者開發的
yeoman和bower以及Grunt成爲之前有 '前端構建三劍客'