經過 create-react-app 從零搭建 React 環境

1、 快速開始：

• 全局安裝腳手架：

npm install -g create-react-app
複製代碼

• 經過腳手架搭建項目：

create-react-app <項目名稱>
複製代碼

• 開始項目：

cd <項目名>
npm run start
複製代碼

2、 查看項目 package.json 信息

2.1 package.json 一覽

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
複製代碼

2.2 可用腳本命令說明：

• 首先說明：經過npm run 執行下面命令其實是運行 node_modules/react-srcipt/script 下對應的腳本文件；
• npm run start: 開始項目，運行項目後可經過 http://localhost:3000 訪問項目；
• npm run build: 項目打包，在生產環境中編譯代碼，並放在build目錄中；全部代碼將被正確打包，並進行優化、壓縮同時使用hash重命名文件；執行該命令前須要在 package.json 中新增條配置"homepage": "."（上面配置文件已給出）, 同時build後的項目須要在服務器下才能訪問；不然打開的將是空白頁面；
• npm run test: 交互監視模式下啓動測試運行程序；
• npm run eject: 將隱藏的配置導出；須要知道的是create-react-app腳手架本質上是使用react-scripts進行配置項目，全部配置文件信息都被隱藏起來(node_modules/react-scripts)；當須要手動修改擴展webpack配置時有時就須要將隱藏的配置暴露出來；特別須要注意的是該操做是一個單向操做，一旦使用eject，那麼就不能恢復了(再次將配置隱藏)；

3、 自動生成的項目目錄以及文件解析：

• node_modules : 項目依賴包目錄；
• public: 公共目錄，該目錄下的文件都不會被webpack進行加載、解析、打包；經過npm run build進行打包時該項目下的全部文件將會直接被複制到build目錄下；
  • favicon.ico : 是網站圖標[可替換刪除]
  • index.html: 頁面模板，webpack打包後將輸出文件引入到該模板內；補充：index.html中經過環境變量%PUBLIC_URL% 來指向public目錄路徑；
  • manifest.json: PWA將應用添加至桌面的功能的實現依賴於 manifest.json 。經過manifest.json 文件能夠對圖標、名稱等信息進行配置。
• src: 是源碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js 文件具備必定意義其他文件都是演示使用可直接刪除
  • index.js: 是整個項目的入口文件；
  • App.test.js: 測試單元演示文件，暫時並不知道幹嗎用；能夠直接刪除；
  • registerServiceWorker.js: service worker 是在後臺運行的一個線程，能夠用來處理離線緩存、消息推送、後臺自動更新等任務；registerServiceWorker就是爲react項目註冊了一個service worker，用來作資源的緩存，這樣你下次訪問時，就能夠更快的獲取資源。並且由於資源被緩存，因此即便在離線的狀況下也能夠訪問應用（此時使用的資源是以前緩存的資源）。注意，registerServiceWorker註冊的service worker 只在生產環境中生效，而且該功能只有在https下才能有效果；
• .gitignore: 該文件是github過濾文件配置
• README.md: 該文件是github描述文件
• package.json: 定義了項目所須要的各類模塊，以及項目的配置信息（好比名稱、版本、許可證等元數據）。部分依賴模塊被隱藏；
• yarn.lock：每次經過yarm添加依賴或者更新包版本時 yarn都會把相關版本信息寫入yarn.lock文件；npm也有相似功能，npm 也能夠生成一個鎖文件，就是使用上沒有yarn方便

4、 添加對 less 的支持

4.1 方法一：暴露配置並進行修改

• 暴露配置文件：

npm run eject
說明: 執行eject腳本後，項目下會新增或對部分配置文件進行修改；項目下 script 目錄存放着腳本文件， config 目錄下存放着配置文件
複製代碼

• 下載安裝依賴：less-loader less

npm install less-loader less -dev
複製代碼

• 修改 config 目錄下的webpack配置文件：
  • 需同時修改下面的兩個文件：
  • 開發環境下的配置文件：webpack.config.dev.js
  • 生產環境下的配置文件：webpack.config.prod.js
  • 兩個文件的修改內容相同，對應修改內容以下(三處須要進行修改)

{
+ test: /\.(css|less)$/,
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
+ importLoaders: 2,
        },
        },
        { .... },
+ {
+ loader: require.resolve('less-loader'),
+ }
    ],
}
複製代碼

4.2 方法二： 使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或添加)

4.2.1 react-app-rewired 老版本配置方法

react-app-rewired 的使用

• 安裝 react-app-rewired 插件

npm install react-app-rewired --save-dev
複製代碼

• 修改 package.json 中的腳本命令：修改以下

"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
+ "eject": "react-app-rewired eject"
  }
複製代碼

• 在項目根目錄下(和 package.json 同級)新建配置文件 config-overrides.js ，並添加以下內容

module.exports = function override(config, env) {
  // 在這裏添加配置
  return config;
}
複製代碼

修改配置文件 config-overrides.js 使得項目可以支持 less

• 安裝依賴包 react-app-rewire-less，經過該依賴包來實現對 less 的支持：

# 說明: 這裏再也不須要額外單獨安裝依賴包：less-loader less
npm install react-app-rewire-less --save
複製代碼

• 修改 config-overrides.js 配置文件

+ const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
+ // 只須要一條配置信息便可實現對less的支持
+ config = rewireLess(config, env);
   return config;
}
複製代碼

4.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

react-app-rewired 的使用： 使用上和舊版本基本同樣只是在配置上須要額外經過 customize-cra 插件來實現

• 安裝 react-app-rewired customize-cra 插件

npm install react-app-rewired customize-cra --save-dev
複製代碼

• 修改 package.json 中的腳本命令：修改以下

"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
+ "eject": "react-app-rewired eject"
  }
複製代碼

• 在項目根目錄下(和 package.json 同級)新建配置文件 config-overrides.js ，並添加以下內容

const { override } = require('customize-cra');
module.exports = override();
複製代碼

修改配置文件 config-overrides.js 使得項目可以支持 less

• 安裝依賴： less less-loader

npm install less less-loader --save-dev
複製代碼

• 修改 config-overrides.js 配置文件: addLessLoader

+ const { override, addLessLoader } = require('customize-cra');
module.exports = override(
+ addLessLoader({
+ strictMath: true,
+ noIeCompat: true
+ })
);
複製代碼

5、 在 create-react-app 中使用Antd

• 安裝 antd 依賴包：

npm install antd --save
複製代碼

5.1 方法一： 直接導入全部樣式， 並引用相應組件

• 引入 antd 組件以前須要先引入 antd 樣式( 在項目入口引入全部樣式 )：

import antd/dist/antd.css
複製代碼

• 在項目中引入 antd 組件

import { Button } from 'antd';
複製代碼

5.2 方法二： 按需加載

• 上面引入組件和樣式的方式，會一次性加載全部樣式並引入組件中的全部相應模塊；
• 這種引入方式將會影響到應用的網絡性能；
• 相應的就須要改變引入組件和樣式的方式，實現樣式和組件的按需加載；
• 下面將介紹三種按需加載組件樣式的方法：

5.2.1 引入獨立的組件和樣式

import Button from 'antd/lib/button';
import 'antd/lib/button/style';
// 或者經過import antd/lib/button/style/css 進行加載樣式
複製代碼

5.2.2 經過暴露配置並使用 babel-plugin-import 插件實現按需加載

• babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件

• 暴露配置

npm run eject
複製代碼

• 安裝插件：

npm install babel-plugin-import --save-dev
複製代碼

• 修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
},
複製代碼

• 配置完後可直接導入 antd 的組件，再也不須要另外引入css樣式；

import { Button } from 'antd';
複製代碼

5.2.2 react-app-rewired + babel-plugin-import 實現按需加載（官網推薦）

react-app-rewired 老版本配置方法

• babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件；

• react-app-rewired 的使用在第四節已經有了詳細的描述這裏不在贅述；下文直接經過修改 config-overrides.js 配置來實現 antd 的按需加載

• 安裝依賴包：babel-plugin-import

npm install babel-plugin-import --save-dev
複製代碼

• 修改配置文件 config-overrides.js： 經過 injectBabelPlugin 插件實現 babel 的添加

+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
   return config;
};
複製代碼

react-app-rewired 新版本配置方法( >=2.1.0 )

• 新版本能夠直接經過 customize-cra 的 fixBabelImports 方法實現按需加載

+const { override, addLessLoader, fixBabelImports } = require('customize-cra');
module.exports = override(
 addLessLoader({
   strictMath: true,
   noIeCompat: true
 }),
+ fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }),
);
複製代碼

5.3 經過 react-app-rewired 擴展 webpack 來實現 antd 自定義主題

• 主要經過利用了 less-loader 的 modifyVars 參數來進行主題配置
• 下面是基於第四節中對 less 的配置的基礎上添加 modifyVars 參數來實現自定義主題的目的

5.3.1 react-app-rewired 老版本配置方法

• 修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // 擴展 webpack ==> 支持less
  config = rewireLess(config, env);
  // 配置 less-loader 加載參數
+ config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" },})(config, env);
  // antd 按需加載配置
  config = injectBabelPlugin(['import',
  { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
  return config;
}
複製代碼

5.3.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• addLessLoader 必須添加 javascriptEnabled: true
• fixBabelImports 實現對 antd 按需加載時須要設置 style: true

const { override, addLessLoader, fixBabelImports } = require('customize-cra');
module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
+ javascriptEnabled: true,
+ modifyVars: { "@primary-color": "#1DA570" }
  }),
+ fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true }),
);
複製代碼

6、 實現對修飾器的支持： 實現對 babel 插件的使用

• 安裝插件

# 若是你的 Babel < 7.x 則安裝 babel-plugin-transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
# 若是你的 Babel >= 7.x 則應該安裝 @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-decorators
複製代碼

6.1 方法一： 暴露配置並進行修改

• 假設當前 Babel >= 7.x， 若是你的 Babel < 7.x 則須要將 ["@babel/plugin-proposal-decorators", {"legacy": true}] 修改成 ["transform-decorators-legacy"]

• 暴露配置

npm run eject
複製代碼

• 修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
+ ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ]
},
複製代碼

6.2 方法二： 使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或添加)

6.2.1 react-app-rewired 老版本配置方法

• react-app-rewired 的使用參考第四節：
• 修改 config-overrides.js 配置文件

// 導入添加babel插件的函數
+const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(["@babel/plugin-proposal-decorators", {"legacy": true}], config)
  return config;
};
複製代碼

6.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• react-app-rewired 的使用參考第四節：
• 修改 config-overrides.js 配置文件:
  • 下面給出了三種配置 babel 插件的方法， addBabelPlugin 和 addBabelPlugins 用法相似
  • useBabelRc 是容許項目使用 .babelrc 配置文件進行配置

+const {
+ override, addLessLoader, fixBabelImports,
+ addBabelPlugin, addBabelPlugins, useBabelRc
+} = require('customize-cra');
module.exports = override(
 addLessLoader({
   strictMath: true,
   noIeCompat: true,
   javascriptEnabled: true,
   modifyVars: { "@primary-color": "#1DA570" }
 }),
 fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true }),

+ addBabelPlugin(["@babel/plugin-proposal-decorators", {"legacy": true}]),

+ // ...addBabelPlugins(
+ // ["@babel/plugin-proposal-decorators", {"legacy": true}]
+ // ),
+ // useBabelRc(),
);

複製代碼

7、 eslint 配置

7.1 暴露配置並進行修改

• 執行腳本 暴露配置文件

npm run eject
複製代碼

• 經過修改 package.json 文件添加對 eslint 的擴展配置

...
"eslintConfig": {
  // 默認繼承 腳手架自帶的 eslint 配置
  "extends": "react-app",
  // 在這裏擴展新增配置
  "rules":{
     // 設置規則，具體看官網用戶指南下的規則文檔
     "eqeqeq": "off"
  }
 }
複製代碼

7.2 使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或添加)

7.2.1 react-app-rewired 老版本配置方法

• react-app-rewired 的使用參考第四節：
• 安裝依賴：

npm install react-app-rewired react-app-rewire-eslint --save
複製代碼

• 修改 config-overrides.js 配置文件

+ const rewireEslint = require('react-app-rewire-eslint');
module.exports = function override(config, env) {
+ config = rewireEslint(config, env);
   return config;
}
複製代碼

• 在根目錄下建立 .eslintrc 並自定義eslint配置

{
  "rules": {
      // 設置規則，具體看官網用戶指南下的規則文檔
      "eqeqeq": "off"
  }
}
複製代碼

7.2.2 react-app-rewired 新版本配置方法( >=2.1.0 )

• react-app-rewired 的使用參考第四節：
• 修改 config-overrides.js 配置文件： 經過 useEslintRc 啓用 .eslintrc 配置文件

+ const { override, useEslintRc } = require('customize-cra');
module.exports = override(
+ useEslintRc(),
);
複製代碼

• 在根目錄下建立 .eslintrc 並自定義eslint配置

{
  "rules": {
      // 設置規則，具體看官網用戶指南下的規則文檔
      "eqeqeq": "off"
  }
}
複製代碼

8、 常見問題：

8.1 經過 react-app-rewired 進行擴展配置時 發現啓動項目後並無效果？

• 在確保一塊兒配置沒有問題下：
• 請確認是否有對腳本命令進行了正確的修改，使用 react-app-rewired 擴展配置須要修改腳本命令

{
  ....
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
...
}
複製代碼

8.2 棄用通知， 則全部配置按新版本 react-app-rewired 配置方法來

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement
複製代碼