一、為啥不建議執(zhí)行eject
1.執(zhí)行eject產(chǎn)生了什么變化？
create-react-app框架本身將webpack、babel的相關(guān)配置封裝在了react-scripts中，執(zhí)行yarneject后，會(huì)將webpack、babel等配置暴露在config目錄下，同時(shí)scripts目錄下會(huì)有新的命令文件更新，package.json文件中scripts命令同步更新。
2.執(zhí)行eject帶來(lái)了什么問(wèn)題？
首先，執(zhí)行eject是不可逆的，復(fù)雜的webpack等配置由框架本身轉(zhuǎn)交給用戶自己進(jìn)行維護(hù)了。
其次，在版本迭代時(shí)，如果更新了react、react-scripts、eslint、tsconfig等依賴，有可能會(huì)引起版本依賴的問(wèn)題，即使我們按錯(cuò)誤信息修復(fù)了之后，項(xiàng)目還是無(wú)法運(yùn)行。
所以我們一般不太建議使用yarneject的方式暴露create-react-app框架的配置。
二、有需求咋解決
實(shí)際開(kāi)發(fā)中，我們還是需要更新webpack、babel的配置，比如：
- antd的按需加載；
- 配置css預(yù)處理器-less；
- 設(shè)置alias、externals；
- 生產(chǎn)環(huán)境打包-去除console.log、debugger；
- 打包結(jié)果優(yōu)化分析；
- 打包增加進(jìn)度條提示；
前方高能預(yù)警~
yarn add react-app-rewired customize-c來(lái)完成配置的擴(kuò)展~
這里劃重點(diǎn)，記住要考呦~
我們劃分幾個(gè)步驟，來(lái)一一實(shí)現(xiàn)：
下載安裝依賴
|
1
|
yarn add react-app-rewired customize-cra -D |
一般現(xiàn)在使用的版本是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 = {} |
完成了基礎(chǔ)配置后，我們?cè)赾onfig-overrides.js中進(jìn)行詳細(xì)配置，解決我們上面的需求問(wèn)題。
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預(yù)處理器-less
為啥在這里只強(qiáng)調(diào)了less呢，因?yàn)閏reate-react-app中內(nèi)置了sass/scss的預(yù)處理器，只需要使用時(shí)安裝相關(guān)的依賴就可以了（運(yùn)行時(shí)，根據(jù)提示缺失的包進(jìn)行安裝即可）。
|
1
|
yarn add sass -D |
接下來(lái)我們來(lái)less的是如何支持的
安裝依賴：
|
1
|
yarn add less [email protected] -D |
注意這里less-loader的版本[email protected]，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置時(shí)有問(wèn)題，所以使用了低版本的。
less-loader的最新版本其實(shí)是為了配合[email protected]使用的。
配置
|
1
2
3
4
5
6
7
8
9
|
const { override, addLessLoader } = require('customize-cra');module.exports = override(addLessLoader({// 這里可以添加less的其他配置lessOptions: { // 根據(jù)自己需要配置即可~ }})); |
3.設(shè)置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({ // 加載模塊的時(shí)候，可以使用“@”符號(hào)來(lái)進(jìn)行簡(jiǎn)寫(xiě)啦~ '@': path.resolve(__dirname, './src/') }), // externals addWebpackExternals({ // 注意對(duì)應(yīng)的在public/index.html引入jquery的遠(yuǎn)程文件地址 "jQuery": "jQuery" }) |
4.生產(chǎn)環(huán)境打包-去除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環(huán)境啟動(dòng)該plugin process.env.NODE_ENV === 'production' && addWebpackPlugin( new UglifyJsPlugin({ // 開(kāi)啟打包緩存 cache: true, // 開(kāi)啟多線程打包 parallel: true, uglifyOptions: { // 刪除警告 warnings: false, // 壓縮 compress: { // 移除console drop_console: true, // 移除debugger drop_debugger: true } } }) ) |
5.打包結(jié)果優(yōu)化分析；
安裝依賴
|
1
|
yarnaddwebpack-bundle-analyzercross-env-D |
cross-env用于配置環(huán)境變量
配置
|
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( // 判斷環(huán)境變量ANALYZER參數(shù)的值 process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())) |
6.打包增加進(jìn)度條提示；
安裝依賴
|
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())) |
以上就是我們實(shí)現(xiàn)幾個(gè)需求的配置。我們來(lái)看看完整的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: { // 根據(jù)自己需要配置即可~ } }), // alias addWebpackAlias({ // 加載模塊的時(shí)候，可以使用“@”符號(hào)來(lái)進(jìn)行簡(jiǎn)寫(xiě)啦~ '@': path.resolve(__dirname, './src/') }), // externals addWebpackExternals({ // 注意對(duì)應(yīng)的在public/index.html引入jquery的遠(yuǎn)程文件地址 "jQuery": "jQuery" }), // 注意是production環(huán)境啟動(dòng)該plugin process.env.NODE_ENV === 'production' && addWebpackPlugin( new UglifyJsPlugin({ // 開(kāi)啟打包緩存 cache: true, // 開(kāi)啟多線程打包 parallel: true, uglifyOptions: { // 刪除警告 warnings: false, // 壓縮 compress: { // 移除console drop_console: true, // 移除debugger drop_debugger: true } } }) ), // 判斷環(huán)境變量ANALYZER參數(shù)的值 process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()), addWebpackPlugin(new ProgressBarPlugin())) |
到此這篇關(guān)于如何不使用eject修改create-react-app的配置的文章就介紹到這了,更多相關(guān)修改create-react-app的配置內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/justbecoder/p/14649623.html
