如何从 ReactJS 生产版本中删除 process.env.NODE_ENV 检查？

Question

我知道 ReactJS 转换__DEV__为"production" !== process.env.NODE_ENV-像这样。我在某处看到它直接转换为布尔值，具体取决于环境，但这是另一个令人困惑的地方。

不过，我想知道是什么特定的 babel-plugin/process/packages 实际上从生产 React ( ) 中删除了这个条件react.min.js，因为该文件中没有这样的条件。

根据我的理解，这是一个两步过程：

1. 使用 Babel 插件，将警告和不变调用转换为if ("production" !== process.env.NODE_ENV)调用
2. 在生产构建中删除上述所有条件（或只是它的真实分支？），当缩小时

后者是如何/在哪里实施的？

Answer 1

ReactJS 使用 Webpack 捆绑其生产代码。
Webpack 有一个名为DefinePlugin的插件，ReactJS使用它。此插件替换代码中的文字值，您可以控制的值。非常类似于编译器内联。

要么我没有得到这个插件的名字，要么它只是一个糟糕的选择。在我试图找出 ReactJS 如何清理其生产代码的研究中，我不止一次浏览了new webpack.DefinePlugin()调用。此外，我对 Webpack 缺乏经验也无济于事。

正如插件页面中提到的，这是一个多步骤的过程：

1. 原始代码：

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

2. 内联由 Define 插件完成：

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

3.缩小步骤，以及最终结果

console.log('Production log');

缩小/优化步骤是通过一个名为Terser的工具完成的，Webpack 正在使用该工具。Terser 看起来像是UglifyJS 的一个分支，而且它也有删除死代码的能力。

所以是：

1. ReactJS 编译生产
2. React 配置 Webpack DefinePlugin process.env.NODE_ENV = 'production'
3. Webpack 内联，由 Webpack 的 DefinePlugin
4. Webpack 优化
5. Webpack Terser 插件
6. Terser 终于删除了死代码

我要感谢@romellem 在这片丛林中为我指明正确的方向。

PS：亲爱的未来读者，我在 2019 年 5 月 10 日写了这篇文章。我的发现可能很快就会过时。