Create React App 是一個(gè)官方支持的創(chuàng)建 React 單頁(yè)應(yīng)用程序的方法恤浪。它提供了一個(gè)零配置的現(xiàn)代構(gòu)建設(shè)置歼指。
雖然開箱即用寝凌，但是開發(fā)中我們還是少不了做一些修改畔濒，下面總結(jié)了一些常用的配置。

yarn安裝依賴包報(bào)錯(cuò)

在項(xiàng)目目錄下運(yùn)行yarn晶乔，報(bào)錯(cuò)如下

yarn install v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz: connect ETIMEDOUT 104.16.21.35:443".
info If you think this is a bug, please open a bug report with the information provided in "F:\\await\\react-rabc\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

提示很明顯珍坊，網(wǎng)絡(luò)連接超時(shí)，我們更換一下源地址就行了

npm 設(shè)置為 淘寶源

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

yarn 設(shè)置為 淘寶源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

項(xiàng)目中如果用的是 sass瘪弓，需要下載 node-sass垫蛆，這個(gè)依賴包下載是相當(dāng)?shù)穆梢詥为?dú)設(shè)置源地址

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

最后刪除 node_modules腺怯，重新下載就行了

IE10下報(bào)錯(cuò), Map 未定義

yarn add react-app-polyfill

入口文件第一行引入

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9'

react-app-polyfill

webpack添加 alias

config/modules.js文件中的webpackAliases的alias是解析項(xiàng)目根目錄下的tsconfig.json或者jsconfig.json來(lái)返回的袱饭，有點(diǎn)復(fù)雜

可以直接在webpack.config.js的resolve.alias字段中的末尾新增字段

resolve: {
  // ...
  alias: {
    // ...
    '@': path.resolve(__dirname, '../src')
  }
}

解決跨域，反向代理配置

1呛占、安裝依賴

yarn add http-proxy-middleware

2虑乖、在src目錄下新建setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000', // 請(qǐng)求接口地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    })
  )
}

項(xiàng)目主要文件路徑配置

包括項(xiàng)目入口文件、靜態(tài)目錄晾虑、項(xiàng)目構(gòu)建輸出目錄疹味、配置proxy文件...

在config/paths.js文件配置，挑出幾個(gè)最常用的

module.exports = {
  dotenv: resolveApp('.env'), // 項(xiàng)目環(huán)境變量文件
  appBuild: resolveApp('dist'), // 項(xiàng)目構(gòu)建輸出目錄帜篇，默認(rèn) build
  appPublic: resolveApp('public'), // 靜態(tài)目錄
  appHtml: resolveApp('public/index.html'), // index.html
  appIndexJs: resolveModule(resolveApp, 'src/index'), // 項(xiàng)目入口文件
  proxySetup: resolveApp('src/setupProxy.js') // 配置 proxy 文件
}

關(guān)閉自動(dòng)開啟瀏覽器配置

在scripts/start.js文件糙捺，注釋掉openBrowser(urls.localUrlForBrowser)即可，
或者使用環(huán)境變量BROWSER

{
  "script": {
    "start": "cross-env BROWSER=none node scripts/start.js"
  }
}

修改 webpack output.publicPath

如果項(xiàng)目不是部署在靜態(tài)服務(wù)器根目錄下會(huì)用到笙隙，直接在package.json中配置homepage字段

{
  "homepage": "/e-admin/"
}

或者使用環(huán)境變量PUBLIC_URL

{
  "script": {
    "build": "cross-env PUBLIC_URL=/e-admin/ node scripts/build.js"
  }
}

生產(chǎn)環(huán)境關(guān)閉 sourcemap

一般在部署到生產(chǎn)環(huán)境會(huì)關(guān)閉 sourcemap洪灯，避免打包文件過(guò)大
查看 webpack.config.js 看到如下代碼：

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

可以在命令行中使用GENERATE_SOURCEMAP這個(gè)環(huán)境變量

{
  "script": {
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js"
  }
}

eslint 配置

可以直接在package.json中的eslintConfig字段配置。

在根目錄下新建.eslint.js（或者.eslintrc）配置文件竟痰，然后在命令行中設(shè)置EXTEND_ESLINT

{
  "script": {
    "start": "cross-env EXTEND_ESLINT=true node scripts/start.js"
  }
}

因?yàn)楦髌脚_(tái)設(shè)置環(huán)境變量的方式不同签钩，這里使用cross-env來(lái)抹平差異

裝飾器 Decorators 配置

開發(fā)中會(huì)有很多高階組件以及 redux 的 connect 來(lái)包裹組件，使用 Decorators 寫法會(huì)直觀許多

• 先安裝 babel 插件

yarn add @babel/plugin-proposal-decorators

• babel 配置坏快，在 plugins 中添加

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

• 完成上面配置后铅檩，編譯就不會(huì)報(bào)錯(cuò)了，代碼能正常運(yùn)行莽鸿，但是編輯器（這是使用VSCode）卻報(bào)錯(cuò)了昧旨，我們需要做額外的配置

  • 在根目錄下新建 jsconfig.json 文件

    {
      "compilerOptions": {
        "experimentalDecorators": true
      }
    }
    

  • 打開 VSCode 的 setting.json 文件，添加以下屬性

    "javascript.implicitProjectConfig.experimentalDecorators": true
    

create-react-app 的 babel 配置默認(rèn)是在 package.json 中的祥得，可以單獨(dú)放到根目錄下(.babelrc或者babel.config.js)

區(qū)分環(huán)境

開發(fā)環(huán)境臼予，測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境啃沪，生產(chǎn)環(huán)境粘拾，很多配置項(xiàng)（比如接口地址）都是不同的，這時(shí)候我們需要根據(jù)環(huán)境來(lái)決定配置項(xiàng)创千。
create-react-app 默認(rèn)支持development缰雇，test，production追驴，這里的 test 是用來(lái)做代碼測(cè)試的械哟，并不是構(gòu)建測(cè)試環(huán)境的，我們需要多種打包環(huán)境殿雪。
這里我們先區(qū)分三個(gè)環(huán)境：

• 開發(fā)環(huán)境 dev
• 測(cè)試環(huán)境 alpha
• 生產(chǎn)環(huán)境 prod

1暇咆、然后在根目錄新建三個(gè)文件 .env，.env.alpha，.env.prod爸业，文件內(nèi)容如下：

// .env
NODE_ENV=development
REACT_APP_MODE=dev

// .env.alpha
NODE_ENV=production
REACT_APP_MODE=alpha

// .env.prod
NODE_ENV=production
REACT_APP_MODE=prod

2其骄、修改package.json的命令腳本

{
  "script": {
    "build:alpha": "cross-env MODE_ENV=alpha node scripts/build.js",
    "build:prod": "cross-env MODE_ENV=prod node scripts/build.js"
  }
}

3、修改config/env.js文件

// const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.MODE_ENV || process.env.NODE_ENV;

4扯旷、然后在業(yè)務(wù)代碼里面就可以使用process.env.REACT_APP_MODE來(lái)區(qū)分環(huán)境了

// axios.baseURL
const baseURL = {
  dev: 'http://localhost:3000',
  alpha: 'http://alpha.xxx.com',
  prod: 'http://xxx.com'
}[process.env.REACT_APP_MODE]

根據(jù)不同命令區(qū)分不同環(huán)境拯爽，這是通用的手段。
這里根據(jù)npm命令中的REACT_APP_MODE來(lái)決定使用哪個(gè).env.[xxx]的環(huán)境變量钧忽，注入到編譯代碼中毯炮。

注意：

• 需要注意的是在 env.js 文件中將 NODE_ENV 替換為了 MODE_ENV，導(dǎo)致本來(lái)的 NODE_ENV 缺失耸黑，在 .env.[xxx] 文件中要補(bǔ)上
• .env.[xxx] 的環(huán)境變量 以 REACT_APP_xxx 開頭

編譯進(jìn)度條配置

• 安裝依賴

  yarn add webpackbar
  

• 修改webpack.config.js文件

  const WebpackBar = require('webpackbar')
  plugins: [
    // ...
    new webpack.ProgressPlugin(),
    new WebpackBar()
  ]
  

webpack.ProgressPlugin() 是webpack內(nèi)置插件桃煎，webpack.ProgressPlugin，WebpackBar用來(lái)顯示編譯時(shí)長(zhǎng)

打包開啟 gzip 壓縮

• 安裝依賴

  yarn add compression-webpack-plugin
  

• 修改webpack.config.js文件

  const CompressionPlugin = require('compression-webpack-plugin')
  const isGzip = process.env.GENERATE_GZIP_FILE === 'true'
  plugins: [
    // ...
    isEnvProduction && isGzip && new CompressionPlugin({
      filename: '[path].gz[query]', // 新版本 asset 屬性已更換為 filename
      algorithm: 'gzip',
      test: /\.js$|\.css$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
  

• 通過(guò)設(shè)置環(huán)境變量GENERATE_GZIP_FILE=true來(lái)啟用gzip壓縮

請(qǐng)確保靜態(tài)服務(wù)器開啟了 gzip 配置項(xiàng)大刊，nginx 配置 gzip_static on; 選項(xiàng)即可

下面是未開啟gzip和開啟gzip的效果：

• 未開啟 gzip

  未開啟gzip

• 開啟 gzip

  未開啟gzip

生成 report.html 可視化打包分析

• 安裝依賴

  yarn add webpack-bundle-analyzer
  

• 修改webpack.config.js文件

  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
  const isBundleAnalyzer = process.env.GENERATE_BUNDLE_ANALYZER_REPORT === 'true'
  plugins: [
    // ...
    isEnvProduction && isBundleAnalyzer && new BundleAnalyzerPlugin()
  ]
  

• 通過(guò)設(shè)置環(huán)境變量GENERATE_BUNDLE_ANALYZER_REPORT=true來(lái)生成report

引入 antd

antd 的 JS 代碼默認(rèn)支持基于 ES modules 的 tree shaking为迈，即按需引入，只是樣式的引入有些區(qū)別

1奈揍、直接引入曲尸，樣式直接用編譯后的antd.css

import { Button } from 'antd'
import 'antd/dist/antd.css'

function App() {
  return (
    <Button type="primary">按鈕</Button>
  )
}

簡(jiǎn)單粗暴，但是沒(méi)法統(tǒng)一修改一些全局的顏色

2男翰、引入 less

• 安裝依賴

  yarn add less less-loader
  

• wepack.config.js配置另患，默認(rèn)的rules已經(jīng)包含css和sass，先找到下面的正則

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  // 加上匹配 less 文件的正則
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  

  然后加上 loader 配置蛾绎，在sass-loader配置下面加上less-loader的配置

  // Adds support for CSS Modules, but using SASS
  // using the extension .module.scss or .module.sass
  {
    test: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'sass-loader'
    ),
  },
  // 在下面加上 less-loader 配置
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
    ),
    sideEffects: true,
  },
  // Adds support for CSS Modules, but using less
  // using the extension .module.less
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
            getLocalIdent: getCSSModuleLocalIdent
        }
      },
      'less-loader'
    ),
  },
  

  找到getStyleLoaders方法昆箕，做如下修改：

  // 將 if (preProcessor) {} 中的代碼替換，實(shí)際上就是判斷是`less-loader`就生成針對(duì)less的options
  if (preProcessor) {
    let preProcessorRule = {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true
      }
    }
    if (preProcessor === 'less-loader') {
      preProcessorRule = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
          lessOptions: { // 如果使用less-loader@5租冠，需要移除 lessOptions 這一級(jí)
            javascriptEnabled: true,
            modifyVars: {
              'primary-color': '#346fff', // 全局主色
              'link-color': '#346fff' // 鏈接色
            }
          }
        }
      }
    }
    loaders.push(
      {
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
      preProcessorRule
    );
  }
  

• 將import 'antd/dist/antd.css'換成import 'antd/dist/antd.less'

  經(jīng)過(guò)上面的配置后鹏倘，可以直接修改less變量來(lái)修改全局顏色、間距等顽爹，所有變量

  當(dāng)然如果在配置文件中覆蓋less變量有些麻煩纤泵，可以直接直接新建單獨(dú)的less文件來(lái)覆蓋默認(rèn)變量

  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less';
  @import 'customer-theme-file.less'; // 用于覆蓋默認(rèn)變量
  

  但是這種方式會(huì)加載所有組件的樣式，沒(méi)法做到按需加載

3镜粤、按需加載

• 安裝依賴

  yarn add babel-plugin-import
  

• babel 配置

  "plugins": [
    [
      "babel-plugin-import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
  

• 去掉import 'antd/dist/antd.less'的引入捏题，現(xiàn)在引入組件就會(huì)附帶引入對(duì)應(yīng)組件的樣式了

參考鏈接：

• Create React App 官方文檔
• Create React App 中文文檔
• Ant Design