React 打包时如何关闭源代码混淆

React 开发中,使用 npm build 命令进行生产代码打包,为了压缩代码并尽量保证代码的安全性,React 打包时会代码进行压缩和混淆,但是有时我们需要 debug 生产环境的源代码,例如当我们调试 SSR 的项目时,需要禁用混淆。本文将介绍一种禁用生产包混淆源代码的方式。

打包源代码需要安装一下两个依赖包

  1. craco Create React App Configuration Override),修改 Webpack 配置文件。
  2. crossenv: 修改配置环境

安装依赖

yarn add cross-env --save-dev
yarn add @craco/craco --save-dev

添加配置文件

在项目根目录下添加 craco.config.js 配置文件,需要排除 react-refresh/babel,否则启动会报错。

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      // Enable source maps for both development and production
      webpackConfig.devtool = 'source-map';

      if (env === 'development') {
        // No React Refresh Webpack Plugin
        // Modify Babel loader to exclude React Refresh plugin
        webpackConfig.module.rules.forEach(rule => {
          if (rule.oneOf instanceof Array) {
            rule.oneOf.forEach(oneOf => {
              if (oneOf.loader && oneOf.loader.includes('babel-loader')) {
                // Ensure no React Refresh plugin is added
                oneOf.options.plugins = (oneOf.options.plugins || []).filter(
                  plugin => !plugin.includes('react-refresh/babel')
                );
              }
            });
          }
        });
      }

      if (env === 'production') {
        // Disable minification for production
        webpackConfig.optimization.minimize = false;
        webpackConfig.optimization.minimizer = [];
      }

      return webpackConfig;
    }
  }
};

修改 package.json

将 package.json 配置文件中的脚本启动命令改为 craco 命令。

  "scripts": {
    "start": "craco start",
    "build": "react-scripts build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "build:dev": "cross-env NODE_ENV=development FAST_REFRESH=true craco build",
    "build:prod": "cross-env NODE_ENV=production craco build"
    
  },

启动并查看代码

下图中可以看到代码未混淆。

相关推荐
疯狂的沙粒1 分钟前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
Lysun0018 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果24 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9626 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋29 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder30 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css