如何不使用eject修改create-react-app的配置

 更新时间:2021年04月14日 13:05:57   作者:胡哥有话说  
许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在不执行eject操作的同时,修改create-react-app的配置。

一、为啥不建议执行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来完成配置的扩展~

这里划重点,记住要考呦~

我们划分几个步骤,来一一实现:

下载安装依赖

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中进行详细配置,解决我们上面的需求问题。

1.antd的按需加载

安装依赖:

yarn add antd -D

配置

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的预处理器,只需要使用时安装相关的依赖就可以了(运行时,根据提示缺失的包进行安装即可)。

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: {
   	// 根据自己需要配置即可~
    }
})
);

3.设置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"
  })

4.生产环境打包-去除console.log、debugger;

安装依赖

yarnadduglifyjs-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
  			}
  		}
  	})
  )

5.打包结果优化分析;

安装依赖

yarnaddwebpack-bundle-analyzercross-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())
)

6.打包增加进度条提示;

安装依赖

yarnaddprogress-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())
)

到此这篇关于如何不使用eject修改create-react-app的配置的文章就介绍到这了,更多相关修改create-react-app的配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react中Suspense的使用详解

    react中Suspense的使用详解

    这篇文章主要介绍了react中Suspense的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • react实现同页面三级跳转路由布局

    react实现同页面三级跳转路由布局

    这篇文章主要为大家详细介绍了react实现同页面三级跳转路由布局,一个路由小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • React实现复杂搜索表单的展开收起功能

    React实现复杂搜索表单的展开收起功能

    本节对于需要展开收起效果的查询表单进行概述,主要涉及前端样式知识。对React实现复杂搜索表单的展开-收起功能感兴趣的朋友一起看看吧
    2021-09-09
  • create-react-app修改为多页面支持的方法

    create-react-app修改为多页面支持的方法

    本篇文章主要介绍了create-react-app修改为多页面支持的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    下面小编就为大家带来一篇浅谈react.js 之 批量添加与删除功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • react 兄弟组件如何调用对方的方法示例

    react 兄弟组件如何调用对方的方法示例

    这篇文章主要介绍了react 兄弟组件如何调用对方的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React 实现拖拽功能的示例代码

    React 实现拖拽功能的示例代码

    这篇文章主要介绍了React 实现拖拽功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React如何将组件渲染到指定DOM节点详解

    React如何将组件渲染到指定DOM节点详解

    这篇文章主要给大家介绍了关于React如何将组件渲染到指定DOM节点的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习下吧。
    2017-09-09
  • react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    最近在做一个后台管理项目,涉及到react相关知识,项目需求需要在表单中带附件提交,怎么实现这个功能呢?下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能,一起看看吧
    2021-06-06
  • 详解React之key的使用和实践

    详解React之key的使用和实践

    这篇文章主要介绍了详解React之key的使用和实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论