create-react-app build 打包隐藏源码

系统管理员 2023-06-30 02:38 3阅读 0赞

在使用`create-react-app`时，打包生产环境`npm run build`，浏览器打开后仍然是可以看到源码的。

在这里以新建一个默认项目为例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

App.js

## 解决办法一： ##

项目根目录新建`.env`文件，内容如下：

GENERATE_SOURCEMAP=false

package.json:

"scripts": {
        "start": "dotenv -e .env.frm react-app-rewired start",
        "start:pro": "dotenv -e .env.frm -e .env.pro react-app-rewired start",
        "build": "dotenv -e .env.frm -e .env react-app-rewired build",
        "build:pro": "dotenv -e .env.pro -e .env.frm react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-scripts eject"
      },

(build中引入.env文件，多个env文件用 -e 隔开)，需要下载dotenv-cli

yarn add dotenv-cli

然后重新打包，浏览器打开后就看不到源码啦。

## 解决方法二： ##

## 原理 ##

为了探究原理，执行`eject`后，可以看到webpack配置中有这么一段

// Source maps are resource heavy and can cause out of memory issue for large source files.
    const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

这里的`process.env.GENERATE_SOURCEMAP`控制着是否捎带源码。所以我们可以配置环境变量**`GENERATE_SOURCEMAP=false`**即可。

当执行`build`时，将按顺序优先寻找`.env.production.local`, `.env.production`, `.env.local`, `.env`文件来配置环境变量，所以就有了上面的操作。

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200114155029181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200114155852606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70