如何打开/关闭 ReactJS 的“开发模式”？

Question

开始使用 ReactJS 的 prop validation feature，正如文档所说，出于性能原因，它只适用于“开发模式”。

React 似乎正在验证我已注释的特定组件的属性，但我不记得明确打开“开发模式”。

我尝试搜索如何触发/切换开发模式，但没有任何运气。

Answer 1

另一个答案假设您正在使用来自 react 的外部预构建文件，虽然这是正确的，但大多数人不会这样做，或者 应该 将 React 作为一个包来使用。此外，在这一点上，大多数 React 库和包也依赖相同的约定来在生产期间关闭开发时间助手。仅使用缩小后的反应也会将所有这些潜在的优化留在桌面上。

最终，魔术归结为 React 在整个代码库中嵌入对 process.env.NODE_ENV 的引用；这些就像一个功能切换。

if (process.env.NODE_ENV !== "production")
  // do propType checks

上面是最常见的模式，其他库也遵循它。因此，要“禁用”这些检查，我们需要将 NODE_ENV 切换为 "production"

禁用“开发模式”的正确方法是通过您选择的捆绑器。

网页包

在你的 webpack 配置中使用 DefinePlugin，如下所示：

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

浏览

使用Envify 转换并使用NODE_ENV=production 运行您的browserify 构建步骤（Windows 上为"set NODE_ENV=production"）

结果

这将生成将所有 process.env.NODE_ENV 实例替换为字符串文字的输出包："production"

奖金

在缩小转换后的代码时，您可以利用“死代码消除”。 DCE 是当 minifier 足够聪明地意识到："production" !== "production" 是 always false 因此将删除 if 块中的任何代码以节省您的字节。

Answer 2

我使用通过 Webpack 运行的手动构建过程，因此对我来说这是一个两步过程：

1. 使用 cross-env 包从 package.json 设置环境变量：

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. 更改 webpack.config.js 文件以使用环境变量（传递给 React 以确定我们是处于开发模式还是生产模式），如果我们处于开发模式，则禁用最小化生成的包，所以我们可以看到我们组件的实际名称。为此，我们需要在 webpack.config.js 文件中使用 webpack 的 optimization 属性：

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5、React v16.9.19、跨环境 v7.0.0、节点 v10.16.14

Answer 3

仅限 Webpack v4 用户：

在 Webpack 配置中指定 mode: production 和 mode: development 将默认使用 DefinePlugin 定义 process.env.NODE_ENV。无需额外代码！

webpack.prod.js（取自文档）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

在我们的 JS 中：

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Webpack 文档：https://webpack.js.org/guides/production/#specify-the-mode

Answer 4

对于基于 webpack 的构建，我曾经为 DEV 和 PROD 设置单独的 webpack.config.js。对于 Prod，请按如下方式解析别名

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

你可以从here找到工作的那一个

Answer 5

我在其他地方发布了这个，但坦率地说，这里会是一个更好的地方。

假设您使用 npm 安装 React 15.0.1，import react from 'react' 或 react = require('react') 将运行 ./mode_modules/react/lib/React.js，这是 React 的原始源代码。

React 文档建议您使用 ./mode_modules/react/dist/react.js 进行开发，使用 react.min.js 进行生产。

如果你缩小 /lib/React.js 或 /dist/react.js 用于生产，React 将显示一条警告消息，表明你已经缩小了非生产代码：

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom、redux、react-redux 的行为类似。 Redux 显示一条警告消息。我相信 react-dom 也可以。

因此，我们明确鼓励您使用来自/dist 的生产版本。

但是，如果你缩小 /dist 版本，webpack 的 UglifyJsPlugin 会报错。

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

您无法避免此消息，因为 UglifyJsPlugin 只能排除 webpack 块，而不是单个文件。

我自己使用开发版和生产版/dist。

• Webpack 要做的工作更少，完成得也更快。 (YRMV)
• React 文档说/dist/react.min.js 针对生产进行了优化。我没有看到任何证据证明'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify 的工作与 '/dist/react.min.js` 一样好。我没有看到任何证据证明你得到了相同的结果代码。
• 我从 uglify 收到 1 条警告消息，而不是来自 react/redux 生态系统的 3 条警告消息。

您可以让 webpack 使用 /dist 版本：

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

Answer 6

如果你正在使用类似ReactJS.NET / Webpack tutorial 的东西，据我所知，你不能使用 process.env 来打开/关闭 React 开发模式。此示例直接链接到 react.js（请参阅 Index.cshtml），因此您只需通过更改 URL 来选择 .min.js 或未缩小的变体。

我不确定为什么会这样，因为示例的 webpack.config.js 有一条评论似乎暗示 externals: { react: 'React' } 可以完成这项工作，但随后继续并直接在页面中包含反应。

Answer 7

是的，它并没有很好的记录，但是在 ReactJS download page 上它谈到了开发和生产模式：

我们提供两个版本的 React：一个用于开发的未压缩版本和一个用于生产的缩小版本。开发版包含关于常见错误的额外警告，而生产版包含额外的性能优化并删除所有错误消息。

基本上，未缩小版的 React 是“开发”模式，缩小版的 React 是“生产”模式。

要处于“生产”模式，只需包含缩小版react-0.9.0.min.js