如何打开/关闭ReactJS'；开发模式'；？

开始使用ReactJS，正如文档所说，出于性能原因，ReactJS只能在“开发模式”下工作

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

---

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

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

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

基本上，React的未统一版本是“开发”模式，而React的精简版本是“生产”模式

---

要处于“生产”模式，只需包含缩小版

react-0.9.0.min.js

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

最终，魔力在于在整个代码库中嵌入对

process.env.NODE\u env

的引用；这些功能类似于功能切换

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

以上是最常见的模式，其他库也遵循这种模式。因此，要“禁用”这些检查，我们需要将

NODE\u ENV

切换到

“生产”

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

网页包 在您的网页配置中使用以下选项：

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

粗制滥造 使用转换并使用

NODE\u ENV=production

（

“在Windows上设置NODE\u ENV=production”

）运行browserify生成步骤

结果 这将生成输出捆绑包，其中所有

process.env.NODE\u env

实例都替换为字符串文字：

“production”

奖金

---

缩小转换后的代码时，可以利用“死代码消除”。DCE是指迷你们足够聪明，能够意识到：

“生产”！==“production”

始终为false，因此只需删除if块中的任何代码即可节省字节。

如果您是从这样的方式工作的，就我所知，您不能使用process.env打开/关闭React开发模式。此示例直接链接到react.js（请参阅），因此您只需通过更改URL来选择.min.js或非精简的变体

---

我不确定为什么会这样，因为示例的webpack.config.js有一条注释似乎暗示了

外部：{react:'react'}

可以完成这项工作，但随后继续，并将react直接包含到页面中。

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

假设您使用npm安装React 15.0.1，

从“React”导入React

或

React=require（'React'）

将运行作为React原始源的

/mode\u modules/React/lib/React.js

React文档建议您使用

/mode\u modules/React/dist/React.js

进行开发，使用

React.min.js

进行生产

如果您缩小生产的

/lib/React.js

或

/dist/React.js

，React将显示一条警告消息，表明您已缩小非生产代码：

警告：看起来您使用的是React开发版本的缩小副本。将React应用程序部署到生产环境时，请确保使用跳过开发警告且速度更快的生产环境。有关更多详细信息，请参见fb.me/react-minification。

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

因此，我们明确鼓励您使用

/dist

的生产版本

然而，如果你缩小

/dist

版本，webpack的UglifyJsPlugin就会抱怨

../~/react/dist/react.js中的警告 关键依赖项： 4:478-485这似乎是一个预构建的javascript文件。虽然这是可能的，但不建议这样做。尝试要求原始源获得更好的结果。 @../~/react/dist/react.js 4:478-4851

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

我自己使用开发和生产的

/dist

版本

• Webpack需要做的工作更少，完成得更快。（YRMV）
• React文档表示，

  /dist/React.min.js

  针对生产进行了优化。我没有读到任何证据证明，

  'process.env'：{NODE\u 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'))
    }
  }

---

对于基于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')
    }

您可以从

中找到仅适用于Webpack v4用户的工作版本：

默认情况下，在网页配置中指定

mode:production

和

mode:development

将使用DefinePlugin定义

process.env.NODE\u env

。不需要额外的代码

webpack.prod.js（取自文档）

在我们的JS中：

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

---

Webpack文档：

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

从包中设置环境变量。

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