如何不使用eject修改create-react-app的配置
一、為啥不建議執(zhí)行eject
1.執(zhí)行eject產(chǎn)生了什么變化?
2.執(zhí)行eject帶來(lái)了什么問(wèn)題?
首先,執(zhí)行eject是不可逆的,復(fù)雜的webpack等配置由框架本身轉(zhuǎn)交給用戶(hù)自己進(jìn)行維護(hù)了。
其次,在版本迭代時(shí),如果更新了react、react-scripts、eslint、tsconfig等依賴(lài),有可能會(huì)引起版本依賴(lài)的問(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):
下載安裝依賴(lài)
yarn add react-app-rewired customize-cra -D
一般現(xiàn)在使用的版本是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 = {}
完成了基礎(chǔ)配置后,我們?cè)赾onfig-overrides.js中進(jìn)行詳細(xì)配置,解決我們上面的需求問(wèn)題。
1.antd的按需加載
安裝依賴(lài):
yarn add antd -D
配置
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)的依賴(lài)就可以了(運(yùn)行時(shí),根據(jù)提示缺失的包進(jìn)行安裝即可)。
yarn add sass -D
接下來(lái)我們來(lái)less的是如何支持的
安裝依賴(lài):
yarn add less less-loader@7.3.0 -D
注意這里less-loader的版本less-loader@7.3.0,如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置時(shí)有問(wèn)題,所以使用了低版本的。
less-loader的最新版本其實(shí)是為了配合webpack@5.0使用的。
配置
const { override, addLessLoader } = require('customize-cra'); module.exports = override( addLessLoader({ // 這里可以添加less的其他配置 lessOptions: { // 根據(jù)自己需要配置即可~ } }) );
3.設(shè)置alias、externals;
const { override, addWebpackAlias } = require('customize-cra'); const path = require('path'); module.exports = override( // 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" })
4.生產(chǎn)環(huán)境打包-去除console.log、debugger;
安裝依賴(lài)
yarnadduglifyjs-webpack-plugin-D
配置
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)化分析;
安裝依賴(lài)
yarnaddwebpack-bundle-analyzercross-env-D
cross-env用于配置環(huán)境變量
配置
// 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( // 判斷環(huán)境變量ANALYZER參數(shù)的值 process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()) )
6.打包增加進(jìn)度條提示;
安裝依賴(lài)
yarnaddprogress-bar-webpack-plugin-D
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文件。
// 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: { // 根據(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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何不使用eject修改create-react-app的配置
許多剛開(kāi)始接觸create-react-app框架的同學(xué),不免都會(huì)有個(gè)疑問(wèn):如何在不執(zhí)行eject操作的同時(shí),修改create-react-app的配置。2021-04-04減少react組件不必要的重新渲染實(shí)現(xiàn)方法
這篇文章主要為大家介紹了減少react組件不必要的重新渲染實(shí)現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React Native中TabBarIOS的簡(jiǎn)單使用方法示例
最近在學(xué)習(xí)過(guò)程中遇到了很多問(wèn)題,TabBarIOS的使用就是一個(gè),所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡(jiǎn)單使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-10-10react-native 圓弧拖動(dòng)進(jìn)度條實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了react-native 圓弧拖動(dòng)進(jìn)度條實(shí)現(xiàn)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中,當(dāng)組件中的props發(fā)生變化時(shí),默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō),如果組件中的任何值更新,整個(gè)組件將重新渲染,包括沒(méi)有更改values/props的函數(shù)/組件。在react中,我們可以通過(guò)memo,useMemo以及useCallback來(lái)防止子組件的rerender2022-10-10如何創(chuàng)建自己的第一個(gè)React 頁(yè)面
React是用于構(gòu)建用戶(hù)界面的JavaScript庫(kù),本文主要介紹了如何創(chuàng)建自己的第一個(gè)React頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11react-router-domV6嵌套路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了react-router-domV6嵌套路由實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01