在create-react-app（react-scripts v4）生产构建中如何保留指定注释？

你遇到的情况是 react-scripts v4 版本默认开启了 Terser 压缩工具的注释提取配置，所有匹配规则的许可注释都会被统一抽离到构建产物的独立 LICENSE.txt 文件中，不会保留在 JS bundle 内，所以你在业务代码里写的 @license 注释不会直接出现在生产构建的 JS 文件里。

以下是具体实现方式，推荐优先使用无需 eject 项目的方案：

方案一：使用 CRACO 修改配置（推荐） #

CRACO 是社区常用的 create-react-app 配置覆盖工具，不需要 eject 项目即可修改内置配置。

1. 安装依赖

npm install @craco/craco terser-webpack-plugin --save-dev

2. 项目根目录新建 craco.config.js 配置文件，写入以下内容：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 定位到内置的 Terser 压缩插件
      const terserPlugin = webpackConfig.optimization.minimizer.find(
        plugin => plugin.constructor.name === 'TerserPlugin'
      )
      if (terserPlugin) {
        // 关闭注释提取功能，禁止将许可注释抽离到单独文件
        terserPlugin.options.extractComments = false
        // 配置保留所有带 @license 标记的注释
        terserPlugin.options.terserOptions.format.comments = /@license/i
      }
      return webpackConfig
    }
  }
}

3. 修改 package.json 中的启动命令，将 react-scripts 替换为 craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

配置完成后执行生产构建，业务代码中带 @license 标记的块注释就会保留在 JS 产物中。

方案二：使用 customize-cra 修改配置 #

如果你习惯用 react-app-rewired + customize-cra 的组合，可以用以下配置：

1. 安装依赖

npm install react-app-rewired customize-cra --save-dev

2. 项目根目录新建 config-overrides.js 配置文件：

const { override, adjustTerser } = require('customize-cra')

module.exports = override(
  adjustTerser(terserOptions => {
    terserOptions.extractComments = false
    terserOptions.format.comments = /@license/i
    return terserOptions
  })
)

3. 修改 package.json 中的启动命令，将 react-scripts 替换为 react-app-rewired 即可。

方案三：eject 项目后修改配置 #

如果你已经 eject 了项目，可以直接修改 config/webpack.config.js 中 TerserPlugin 的配置，参数和上面的配置一致即可。

注意事项 #

• 不要将需要保留的许可注释写在未被引用的代码块中，否则会跟随代码被 tree shaking 一起移除，建议将许可注释写在模块的顶层位置。
• 如果你需要保留其他规则的注释，只需要修改 comments 字段的正则匹配规则即可。

内容的提问来源于stack exchange，提问作者chevin99