摘要：通過(guò)文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過(guò)濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。

全局安裝腳手架：

$ npm install -g create-react-app

通過(guò)腳手架搭建項(xiàng)目：

$ create-react-app <項(xiàng)目名稱>

開(kāi)始項(xiàng)目：

$ cd <項(xiàng)目名>
$ npm run start

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 可用腳本命令說(shuō)明：

首先說(shuō)明：通過(guò)npm run 執(zhí)行下面命令實(shí)際上是運(yùn)行 node_modules/react-srcipt/script下對(duì)應(yīng)的腳本文件；

npm run start : 開(kāi)始項(xiàng)目，通過(guò)http://localhost:3000 可訪問(wèn)項(xiàng)目；

npm run build : 項(xiàng)目打包，在生產(chǎn)環(huán)境中編譯代碼，并放在build目錄中；所有代碼將被正確打包，并進(jìn)行優(yōu)化、壓縮同時(shí)使用hash重命名文件；執(zhí)行該命令前需要在package.json中新增條配置"homepage": "."（上面配置文件已給出）, 同時(shí)build后的項(xiàng)目需要在服務(wù)器下才能訪問(wèn)；否則打開(kāi)的將是空白頁(yè)面；

npm run test : 交互監(jiān)視模式下啟動(dòng)測(cè)試運(yùn)行程序；

npm run eject : 將隱藏的配置導(dǎo)出；需要知道的是create-react-app腳手架本質(zhì)上是使用react-scripts進(jìn)行配置項(xiàng)目，所有配置文件信息都被隱藏起來(lái)(node_modules/react-scripts)；當(dāng)需要手動(dòng)修改擴(kuò)展webpack配置時(shí)有時(shí)就需要將隱藏的配置暴露出來(lái)；特別需要注意的是該操作是一個(gè)單向操作，一旦使用eject，那么就不能恢復(fù)了(再次將配置隱藏)；

node_modules : 項(xiàng)目依賴包目錄；

public: 公共目錄，該目錄下的文件都不會(huì)被webpack進(jìn)行加載、解析、打包；通過(guò)npm run build進(jìn)行打包時(shí)該項(xiàng)目下的所有文件將會(huì)直接被復(fù)制到build目錄下；

favicon.ico : 是網(wǎng)站圖標(biāo)[可替換刪除]

index.html: 頁(yè)面模板，webpack打包后將輸出文件引入到該模板內(nèi)；補(bǔ)充：index.html中通過(guò)環(huán)境變量%PUBLIC_URL% 來(lái)指向public目錄路徑；

manifest.json: PWA將應(yīng)用添加至桌面的功能的實(shí)現(xiàn)依賴于 manifest.json 。通過(guò)manifest.json 文件可以對(duì)圖標(biāo)、名稱等信息進(jìn)行配置。

src: 是源碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js 文件具有一定意義其余文件都是演示使用可直接刪除

index.js: 是整個(gè)項(xiàng)目的入口文件；

App.test.js: 測(cè)試單元演示文件，暫時(shí)并不知道干嘛用；可以直接刪除；

registerServiceWorker.js: service worker 是在后臺(tái)運(yùn)行的一個(gè)線程，可以用來(lái)處理離線緩存、消息推送、后臺(tái)自動(dòng)更新等任務(wù)；registerServiceWorker就是為react項(xiàng)目注冊(cè)了一個(gè)service worker，用來(lái)做資源的緩存，這樣你下次訪問(wèn)時(shí)，就可以更快的獲取資源。而且因?yàn)橘Y源被緩存，所以即使在離線的情況下也可以訪問(wèn)應(yīng)用（此時(shí)使用的資源是之前緩存的資源）。注意，registerServiceWorker注冊(cè)的service worker 只在生產(chǎn)環(huán)境中生效，并且該功能只有在https下才能有效果；

.gitignore: 該文件是github過(guò)濾文件配置

README.md: 該文件是github描述文件

package.json: 定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。部分依賴模塊被隱藏；

yarn.lock：每次通過(guò)yarm添加依賴或者更新包版本時(shí) yarn都會(huì)把相關(guān)版本信息寫入yarn.lock文件；npm也有類似功能，npm 也可以生成一個(gè)鎖文件，就是使用上沒(méi)有yarn方便

4.1 方法一：將 webpack 配置暴露出來(lái)并進(jìn)行修改

暴露配置文件：

$ npm run eject
說(shuō)明: 執(zhí)行eject腳本后，項(xiàng)目下會(huì)新增或?qū)Σ糠峙渲梦募M(jìn)行修改；項(xiàng)目下 script 目錄存放著腳本文件， config 目錄下存放著配置文件

下載安裝依賴：less-loader less

$ npm install less-loader less -dev

修改 config 目錄下的webpack配置文件：

// 需同時(shí)修改下面的兩個(gè)文件：
// 開(kāi)發(fā)環(huán)境下的配置文件：webpack.config.dev.js 
// 生產(chǎn)環(huán)境下的配置文件：webpack.config.prod.js
// 兩個(gè)文件的修改內(nèi)容相同，對(duì)應(yīng)修改內(nèi)容如下(三處需要進(jìn)行修改)
......
{
    // 【1】修改文件匹配正則
    test: /.(css|less)$/, 
    use: [
        require.resolve("style-loader"),
        {
            loader: require.resolve("css-loader"),
            options: {
            // 【2】將原本數(shù)字 1  改為數(shù)字2
            importLoaders: 2,
        },
        },
        { .... },
        // 【3】添加新的加載配置對(duì)象
        {
            loader: require.resolve("less-loader"),
        }
    ],
}
......

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

安裝依賴包 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"
  }

在項(xiàng)目根目錄下(和 package.json 同級(jí))新建配置文件 config-overrides.js ，并添加如下內(nèi)容

module.exports = function override(config, env) {
    // 在這里添加配置
    return config;
}

安裝依賴包 react-app-rewire-less，通過(guò)該依賴包來(lái)實(shí)現(xiàn)對(duì) less 的支持：

$ npm install react-app-rewire-less --save
說(shuō)明: 這里不再需要額外多帶帶安裝依賴包：less-loader  less

修改 config-overrides.js 配置文件，為 webpack 配置 less

const rewireLess = require("react-app-rewire-less");
module.exports = function override(config, env) {
  // 只需要一條配置信息即可實(shí)現(xiàn)對(duì)less的支持
  config = rewireLess(config, env);
  // 下面注釋用于配置loader的參數(shù)
  // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
  return config;
}

5.1 一般使用方法（不推薦）

搭建項(xiàng)目：

$ create-react-app demo
$ cd demo
$ npm run start

引入 antd 依賴包：

$ npm install npm

引入 antd 組件之前需要先引入 antd 樣式( 在項(xiàng)目入口引入所有樣式 )：

import antd/dist/antd.css

在項(xiàng)目中引入 antd 組件

import { Button } from "antd";

5.2 按需加載

- 上面引入組件和樣式的方式，會(huì)一次性加載所有樣式并引入組件中的所有相應(yīng)模塊；
- 這種引入方式將會(huì)影響到應(yīng)用的網(wǎng)絡(luò)性能；
- 相應(yīng)的就需要改變引入組件和樣式的方式，實(shí)現(xiàn)樣式和組件的按需加載；
- 下面將介紹三種按需加載組件樣式的方法：

5.2.1 方法一: 精確加載組件

import Button from "antd/lib/button";
import "antd/lib/button/style"; 
// 或者通過(guò)import antd/lib/button/style/css 進(jìn)行加載樣式

5.2.2 方法二：通過(guò)暴露配置 配合 babel-plugin-import插件實(shí)現(xiàn)按需加載
babel-plugin-import 是一個(gè)用于按需加載組件代碼和樣式的 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" }]
  ]
},

配置完后可直接導(dǎo)入 antd 的組件，不再需要另外引入css樣式；

import { Button } from "antd";9

5.2.2 方法三：通過(guò) babel-plugin-import + react-app-rewired實(shí)現(xiàn)按需加載（官網(wǎng)推薦）

react-app-rewired：的使用上文有過(guò)描述；主要用于在不暴露配置的情況下對(duì)webpack的配置進(jìn)行擴(kuò)展；

babel-plugin-import 是一個(gè)用于按需加載組件代碼和樣式的 babel 插件

安裝依賴包：babel-plugin-import

$ npm install babel-plugin-import --save-dev

通過(guò) react-app-rewired 對(duì) webpack 配置進(jìn)行擴(kuò)展添加新的babel插件，config-overrides.js 修改 ( 添加 ) 如下內(nèi)容：

// 引入 react-app-rewired 添加 babel 插件的函數(shù)
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", 
        { libraryName: "antd", libraryDirectory: "es", style: "css" }], config);
    return config;
};

配置完后可直接導(dǎo)入 antd 的組件，不再需要另外引入css樣式；

import { Button } from "antd";9

5.3 通過(guò) react-app-rewired 擴(kuò)展 webpack 來(lái)實(shí)現(xiàn) antd 自定義主題

主要通過(guò)利用了 less-loader 的 modifyVars 參數(shù)來(lái)進(jìn)行主題配置

安裝配置：react-app-rewired (上文已經(jīng)詳細(xì)介紹過(guò)這里就不再細(xì)說(shuō))

安裝依賴包 react-app-rewire-less ：實(shí)現(xiàn)對(duì) less 的支持同時(shí)添加 modifyVars 加載參數(shù)設(shè)置

 $ npm react-app-rewire-less --save-dev 

修改 config-overrides.js 配置文件

const rewireLess = require("react-app-rewire-less");
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    // 擴(kuò)展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader參數(shù)
    config = rewireLess.withLoaderOptions({
        // 修改默認(rèn)顏色 實(shí)現(xiàn)自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載配置
    config = injectBabelPlugin(["import", 
        { libraryName: "antd", libraryDirectory: "es", style: true }], config);
    return config;
}

5.4 通過(guò)插件 babel-plugin-transform-decorators-legacy 實(shí)現(xiàn)對(duì)修飾器的支持

5.4.1 通過(guò)暴露配置實(shí)現(xiàn)

暴露配置

$ npm run eject

安裝插件：

$ npm install --save-dev babel-plugin-transform-decorators-legacy

修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["transform-decorators-legacy"]
  ]
},

5.4.2 使用插件 react-app-rewired 對(duì)配置進(jìn)行擴(kuò)展實(shí)現(xiàn)對(duì)修飾器的支持

react-app-rewired 的使用詳見(jiàn)上文：

安裝插件：

$ npm install --save-dev babel-plugin-transform-decorators-legacy

編寫 config-overrides.js 配置文件

// 導(dǎo)入添加babel插件的函數(shù)
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  // 修飾器擴(kuò)展 (添加babel插件：transform-decorators-legacy ）
  config = injectBabelPlugin("transform-decorators-legacy", config)
  return config;
};

6.1 通過(guò) react-app-rewired 進(jìn)行擴(kuò)展配置時(shí) 發(fā)現(xiàn)啟動(dòng)項(xiàng)目后并沒(méi)有效果？

在確保一起配置沒(méi)有問(wèn)題下：

請(qǐng)確認(rèn)是否有對(duì)腳本命令進(jìn)行了正確的修改，使用react-app-rewired 擴(kuò)展配置需要修改腳本命令

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