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

从使用ReactJS的prop验证功能开始，正如文档所说，出于性能原因，该功能仅在“开发模式”下有效。

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

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

对方的回答假设您使用外部预建的文件从反应，而正确的，是大多数人不会如何去或应该消耗作出反应，一个包。而且，在这一点上，大多数每个React库和包都还依赖相同的约定来在生产期间关闭开发人员时间助手。仅使用缩小的反应，所有这些潜在的优化也将留在桌面上。

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

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

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

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

网络包

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

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

浏览器

使用Envify转换并在NODE_ENV=production（"set NODE_ENV=production"Windows上）中运行浏览器构建步骤

结果

这将产生输出包，其中所有实例都process.env.NODE_ENV被字符串文字替换："production"

奖金

最小化转换后的代码时，您可以利用“消除死代码”的优势。DCE是当minifier是聪明地认识到："production" !== "production"是总是假的，这样只会删除任何代码在if块节省您的字节。

是的，它并没有得到很好的记录，但是在ReactJS 下载页面上，它讨论了开发和生产模式：

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

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

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

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

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

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 docs表示/dist/react.min.js已针对生产进行了优化。我还没有证据表明'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }加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'))
    }
  }

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

     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')
    }

您可以从这里找到工作的人

如果您正在使用类似ReactJS.NET / Webpack的教程进行工作，就我所知，您不能使用process.env来打开/关闭React开发模式。此示例直接链接到react.js（请参阅Index.cshtml），因此您只需通过更改URL选择.min.js或非最小化的变体。

我不确定为什么会这样，因为该示例的webpack.config.js的注释似乎暗示externals: { react: 'React' }可以完成此工作，但随后继续进行并直接在页面中做出反应。

对于唯一的WebPack V4用户：

默认情况下mode: production，mode: development在Webpack配置中指定和将process.env.NODE_ENV使用DefinePlugin进行定义。无需其他代码！

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

我使用了贯穿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: { 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