不想eject，還咋修改create-react-app的配置？

時間 2021-04-13

標籤 javascript css html 前端 java react jquery webpack web json 欄目 React 简体版

原文原文鏈接

1、先拋問題

許多剛開始接觸create-react-app框架的同窗，難免都會有個疑問：如何在不執行eject操做的同時，修改create-react-app的配置。今天胡哥就來帶你們一塊兒來看看這個問題~javascript

2、爲啥不建議執行eject

1. 執行eject產生了什麼變化？

create-react-app框架自己將webpack、babel的相關配置封裝在了react-scripts中，執行yarn eject後，會將webpack、babel等配置暴露在config目錄下，同時scripts目錄下會有新的命令文件更新，package.json文件中scripts命令同步更新。css

2. 執行eject帶來了什麼問題？

首先，執行eject是不可逆的，複雜的webpack等配置由框架自己轉交給用戶本身進行維護了。html

其次，在版本迭代時，若是更新了react、react-scripts、eslint、tsconfig等依賴，有可能會引發版本依賴的問題，即便咱們按錯誤信息修復了以後，項目仍是沒法運行。前端

因此咱們通常不太建議使用yarn eject的方式暴露create-react-app框架的配置。java

3、有需求咋解決

實際開發中，咱們仍是須要更新webpack、babel的配置，好比：react

antd的按需加載；jquery
配置css預處理器 - less；webpack
設置alias、externals；web
生產環境打包-去除console.log、debugger；json
打包結果優化分析；
打包增長進度條提示；

前方高能預警~

藉助react-app-rewired和customize-cra來完成配置的擴展~

這裏劃重點，記住要考呦~

咱們劃分幾個步驟，來一一實現：

下載安裝依賴
```
yarn add react-app-rewired customize-cra -D
```
胡哥如今使用的版本是 react-app-rewired@^2.1.8 、customize-cra@^1.0.0

配置package.json的命令

"scripts": {
-   "start": "react-scripts start",
+		"start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
}

在根目錄下配置config-overrides.js文件
```
module.exports = {}
```

完成了基礎配置後，咱們在config-overrides.js中進行詳細配置，解決咱們上面的需求問題。

antd的按需加載

安裝依賴:

yarn add antd -D

配置

cosnt { override, fixBabelImports } = require('customize-cra');

module.exports = override(
	fixBabelImports(
  	"import",
    {
			"libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  )
)

配置css預處理器 - less

爲啥在這裏只強調了less呢，由於create-react-app中內置了sass/scss的預處理器，只須要使用時安裝相關的依賴就能夠了（運行時，根據提示缺失的包進行安裝便可）。
```
yarn add sass -D
```
接下來咱們來less的是如何支持的

安裝依賴：
```
yarn add less less-loader@7.3.0 -D
```
注意這裏less-loader的版本 less-loader@7.3.0，若是是最新的版本和上面的react-app-rewired和customize-cra版本配合配置時有問題，因此使用了低版本的。

less-loader的最新版本實際上是爲了配合webpack@5.0使用的。

配置
```
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
	addLessLoader({
		// 這裏能夠添加less的其餘配置
		lessOptions: {
   		// 根據本身須要配置便可~
    }
	})
);
```

設置alias、externals；

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  // alias
	addWebpackAlias({
    // 加載模塊的時候，能夠使用「@」符號來進行簡寫啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意對應的在public/index.html引入jquery的遠程文件地址
    "jQuery": "jQuery"
  })
)

生產環境打包-去除console.log、debugger；

安裝依賴

yarn add uglifyjs-webpack-plugin -D

配置

const { override, addWebpackPlugin } = require('customize-cra');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = override(
	// 注意是production環境啓動該plugin
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// 開啓打包緩存
  		cache: true,
  		// 開啓多線程打包
  		parallel: true,
  		uglifyOptions: {
  			// 刪除警告
  			warnings: false,
  			// 壓縮
  			compress: {
  				// 移除console
  				drop_console: true,
  				// 移除debugger
  				drop_debugger: true
  			}
  		}
  	})
  )
)

打包結果優化分析；

安裝依賴

yarn add webpack-bundle-analyzer cross-env -D

cross-env用於配置環境變量

配置

// package.json文件
"scripts": {
	"build:analyzer": "cross-env ANALYZER=true react-app-rewired build"
}

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = override(
  // 判斷環境變量ANALYZER參數的值
	process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
)

打包增長進度條提示；

安裝依賴

yarn add progress-bar-webpack-plugin -D

const { override, addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = override(
	addWebpackPlugin(new ProgressBarPlugin())
)

以上就是咱們實現幾個需求的配置。咱們來看看完整的config-overrides.js文件。

// config-overrides.js
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = require('customize-cra');
const path = require('path');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = override(
	fixBabelImports(
  	"import",
    {
			"libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ),
  addLessLoader({
		// 這裏能夠添加less的其餘配置
		lessOptions: {
   		// 根據本身須要配置便可~
    }
	}),
  // alias
	addWebpackAlias({
    // 加載模塊的時候，能夠使用「@」符號來進行簡寫啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意對應的在public/index.html引入jquery的遠程文件地址
    "jQuery": "jQuery"
  }),
  // 注意是production環境啓動該plugin
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// 開啓打包緩存
  		cache: true,
  		// 開啓多線程打包
  		parallel: true,
  		uglifyOptions: {
  			// 刪除警告
  			warnings: false,
  			// 壓縮
  			compress: {
  				// 移除console
  				drop_console: true,
  				// 移除debugger
  				drop_debugger: true
  			}
  		}
  	})
  ),
  // 判斷環境變量ANALYZER參數的值
	process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(new ProgressBarPlugin())
)