一、先抛问题

许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在不执行eject操作的同时,修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~

二、为啥不建议执行eject

1. 执行eject产生了什么变化?

create-react-app框架本身将webpackbabel的相关配置封装在了react-scripts中, 执行yarn eject后,会将webpackbabel等配置暴露在config目录下,同时scripts目录下会有新的命令文件更新,package.json文件中scripts命令同步更新。

2. 执行eject带来了什么问题?

首先,执行eject是不可逆的,复杂的webpack等配置由框架本身转交给用户自己进行维护了。

其次,在版本迭代时,如果更新了reactreact-scriptseslinttsconfig等依赖,有可能会引起版本依赖的问题,即使我们按错误信息修复了之后,项目还是无法运行

所以我们一般不太建议使用yarn eject的方式暴露create-react-app框架的配置。

三、有需求咋解决

实际开发中,我们还是需要更新webpackbabel的配置,比如:

  • antd的按需加载;

  • 配置css预处理器 - less;

  • 设置alias、externals;

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

  • 打包结果优化分析;

  • 打包增加进度条提示;

前方高能预警~

借助react-app-rewiredcustomize-cra来完成配置的扩展~

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

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

  1. 下载安装依赖

    yarn add react-app-rewired customize-cra -D

    胡哥现在使用的版本是 react-app-rewired@^2.1.8 、customize-cra@^1.0.0

  2. 配置package.json的命令

    "scripts": {
    - "start": "react-scripts start",
    + "start": "react-app-rewired start",
    - "build": "react-scripts build",
    + "build": "react-app-rewired build",
    }
  3. 在根目录下配置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;

    安装依赖

    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
    }
    }
    })
    )
    )
  5. 打包结果优化分析;

    安装依赖

    yarn add webpack-bundle-analyzer cross-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. 打包增加进度条提示;

    安装依赖

    yarn add progress-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的配置?的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  9. create react app遇到的问题

    我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求 ...

  10. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

随机推荐

  1. uniapp设置不同的主题(Theme)

    App.vue: <style lang="stylus"> @css { html { --primary: blue; --bg-image: url(https: ...

  2. 下载com.springsource.org.aspectj.weaver-1.6.8.RELEASE.jar

    看别人都说在repo.maven.com下载,没想到竟然要登录 索性我直接在国内阿里云的镜像仓库下载好了,速度又快又方便 搜索aspectj 下载地址:https://maven.aliyun.com ...

  3. python基础(2)字符串常用方法

    python字符串常用方法 find(sub[, start[, end]]) 在索引start和end之间查找字符串sub ​找到,则返回最左端的索引值,未找到,则返回-1 ​start和end都可 ...

  4. docket 缺陷

    docker轻量级的虚拟机 依赖于内存和核数 相比于正常的虚拟机来说运行速度会慢

  5. 完全基于node的web应用

    完全基于node的web应用 node js web fs fs文件路径 事实上通常"正确的方式"一般都不简单. 用例 模块 基本http服务器 基于事件驱动回调 模块化serve ...

  6. 基于Hi3559AV100的SVP(NNIE)开发整体流程

    在之后的hi3559AV100板载开发中,除了走通V4L2->VDEC->VPSS->VO(HDMI)输出,还有需要进行神经网络的开发学习,进行如face detection的开发等 ...

  7. Arrays.Sort()中的那些排序算法

    本文基于JDK 1.8.0_211撰写,基于java.util.Arrays.sort()方法浅谈目前Java所用到的排序算法,仅个人见解和笔记,若有问题欢迎指证,着重介绍其中的TimSort排序,其 ...

  8. 使用函数式语言实践DDD

    长期以来我都在实践OOP,进而通过OOP来实现DDD,特别是如何通过面向对象的技巧来建立一个领域模型.OO的一些特性在建立领域模型时显得恰如其分,能否掌握OO的技巧,对创建领域模型有着至关重要的作用. ...

  9. 16. 使用vue3结构及配置管理

    主要内容: vue-cli2和3的区别 创建vue-cli3脚手架 vue-cli3项目的目录结构 vue-cli2和vue-cli3中 main.js文件的区别 vue-cli3的配置文件管理 一. ...

  10. 对于如何从SM2的pfx证书文件中解析公钥和私钥,并从二次加密的密文中解密

    首先呢,由于我的域名之前处理点问题,然后备案第二个网站时候,第一个网站没法访问,所以备案没过,阿里云告诉我要删除一个网站的备案,但是他没告诉我要删除主体,所以我的备案主体成了空壳主体,要传真或者发快递 ...