一、為啥不建議執行eject
1.執行eject產生了什么變化？
create-react-app框架本身將webpack、babel的相關配置封裝在了react-scripts中，執行yarneject后，會將webpack、babel等配置暴露在config目錄下，同時scripts目錄下會有新的命令文件更新，package.json文件中scripts命令同步更新。
2.執行eject帶來了什么問題？
首先，執行eject是不可逆的，復雜的webpack等配置由框架本身轉交給用戶自己進行維護了。
其次，在版本迭代時，如果更新了react、react-scripts、eslint、tsconfig等依賴，有可能會引起版本依賴的問題，即使我們按錯誤信息修復了之后，項目還是無法運行。
所以我們一般不太建議使用yarneject的方式暴露create-react-app框架的配置。
二、有需求咋解決
實際開發中，我們還是需要更新webpack、babel的配置，比如：
- antd的按需加載；
- 配置css預處理器-less；
- 設置alias、externals；
- 生產環境打包-去除console.log、debugger；
- 打包結果優化分析；
- 打包增加進度條提示；
前方高能預警~
yarn add react-app-rewired customize-c來完成配置的擴展~
這里劃重點，記住要考呦~
我們劃分幾個步驟，來一一實現：
下載安裝依賴
|
1
|
yarn add react-app-rewired customize-cra -D |
一般現在使用的版本是react-app-rewired@^2.1.8、customize-cra@^1.0.0
配置package.json的命令
|
1
2
3
4
5
6
|
"scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",} |
在根目錄下配置config-overrides.js文件
|
1
|
module.exports = {} |
完成了基礎配置后，我們在config-overrides.js中進行詳細配置，解決我們上面的需求問題。
1.antd的按需加載
安裝依賴:
|
1
|
yarn add antd -D |
配置
|
1
2
3
4
5
6
7
8
9
10
|
cosnt { override, fixBabelImports } = require('customize-cra');module.exports = override( fixBabelImports( "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" } ) |
2.配置css預處理器-less
為啥在這里只強調了less呢，因為create-react-app中內置了sass/scss的預處理器，只需要使用時安裝相關的依賴就可以了（運行時，根據提示缺失的包進行安裝即可）。
|
1
|
yarn add sass -D |
接下來我們來less的是如何支持的
安裝依賴：
|
1
|
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使用的。
配置
|
1
2
3
4
5
6
7
8
9
|
const { override, addLessLoader } = require('customize-cra');module.exports = override(addLessLoader({// 這里可以添加less的其他配置lessOptions: { // 根據自己需要配置即可~ }})); |
3.設置alias、externals；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const { override, addWebpackAlias } = require('customize-cra');const path = require('path');module.exports = override( // aliasaddWebpackAlias({ // 加載模塊的時候，可以使用“@”符號來進行簡寫啦~ '@': path.resolve(__dirname, './src/') }), // externals addWebpackExternals({ // 注意對應的在public/index.html引入jquery的遠程文件地址 "jQuery": "jQuery" }) |
4.生產環境打包-去除console.log、debugger；
安裝依賴
|
1
|
yarnadduglifyjs-webpack-plugin-D |
配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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 } } }) ) |
5.打包結果優化分析；
安裝依賴
|
1
|
yarnaddwebpack-bundle-analyzercross-env-D |
cross-env用于配置環境變量
配置
|
1
2
|
// package.json文件"scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" } |
|
1
2
3
4
5
6
7
|
// config-overrides.jsconst { override, addWebpackPlugin } = require('customize-cra');const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = override( // 判斷環境變量ANALYZER參數的值 process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())) |
6.打包增加進度條提示；
安裝依賴
|
1
|
yarnaddprogress-bar-webpack-plugin-D |
|
1
2
3
4
5
|
const { override, addWebpackPlugin } = require('customize-cra');const ProgressBarPlugin = require('progress-bar-webpack-plugin');module.exports = override( addWebpackPlugin(new ProgressBarPlugin())) |
以上就是我們實現幾個需求的配置。我們來看看完整的config-overrides.js文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
// config-overrides.jscosnt { 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())) |
到此這篇關于如何不使用eject修改create-react-app的配置的文章就介紹到這了,更多相關修改create-react-app的配置內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/justbecoder/p/14649623.html
