如何打开/关闭 ReactJS“开发模式"? [英] How to turn on/off ReactJS 'development mode'?

问题描述

开始使用 ReactJS 的 prop 验证功能，正如文档所说出于性能原因，在开发模式"下工作.

Started using ReactJS's prop validation feature, which as the docs say only works in 'development mode' for performance reasons.

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

React seems to be validating the properties of a particular component I've annotated, but I don't remember explicitly turning on 'development mode'.

我尝试寻找如何触发/切换开发模式，但没有任何运气.

I tried searching for how to trigger/toggle development mode, but haven't had any luck.

推荐答案

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

The other answer assumes you are using external pre-built files from react, and while correct that is not how most folks are going to or should consume React as a package. Moreover, at this point most every React library and package also relies on the same convention to toggle dev time helpers off during production. Just using the minified react will leave all those potential optimizations on the table as well.

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

Ultimately the magic comes down to React embedding references to process.env.NODE_ENV throughout the codebase; these act like a feature toggle.

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

以上是最常见的模式，其他库也遵循它.所以要禁用"这些检查我们需要将 NODE_ENV 切换到 production"

The above is the most common pattern, and other libraries follow it as well. So to "disable" these checks we need to toggle NODE_ENV to "production"

禁用开发模式"的正确方法是通过您选择的打包程序.

The proper way to disable "dev mode" is through your bundler of choice.

在你的 webpack 配置中使用 DefinePlugin所以:

Use the DefinePlugin in your webpack config like so:

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

浏览

使用 Envify 转换并使用 NODE_ENV=production (在 Windows 上设置 NODE_ENV=production")

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

This will produce output bundles that has all instances of process.env.NODE_ENV replaced with the string literal: "production"

在缩小转换后的代码时，您可以利用死代码消除".DCE 是当 minifier 足够聪明以意识到:production"!== "production" 总是 false，因此只会删除 if 块中的任何代码，从而节省字节.

When minifying the transformed code you can take advantage of "Dead Code Elimination". DCE is when the minifier is smart enough to realize that: "production" !== "production" is always false and so will just remove any code in the if block saving you bytes.

这篇关于如何打开/关闭 ReactJS“开发模式"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！