不想eject，还咋修改create-react-app的配置？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了不想eject，还咋修改create-react-app的配置？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5641字，纯文字阅读大概需要9分钟。
内容图文
一、先抛问题
许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~
二、为啥不建议执行eject
1. 执行eject产生了什么变化？
create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下，同时scripts目录下会有新的命令文件更新，package.json文件中scripts命令同步更新。
2. 执行eject带来了什么问题？
首先，执行eject是不可逆的，复杂的webpack等配置由框架本身转交给用户自己进行维护了。
其次，在版本迭代时，如果更新了react、react-scripts、eslint、tsconfig等依赖，有可能会引起版本依赖的问题，即使我们按错误信息修复了之后，项目还是无法运行。
所以我们一般不太建议使用
yarn eject的方式暴露create-react-app框架的配置。
三、有需求咋解决
实际开发中，我们还是需要更新webpack、babel的配置，比如：
-
antd的按需加载； -
配置css预处理器 - less；
-
设置alias、externals；
-
生产环境打包-去除console.log、debugger；
-
打包结果优化分析；
-
打包增加进度条提示；
前方高能预警~
借助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 -Dcross-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 -Dconst { 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())
)
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...
胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！
内容总结
以上是互联网集市为您收集整理的不想eject，还咋修改create-react-app的配置？全部内容，希望文章能够帮你解决不想eject，还咋修改create-react-app的配置？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。