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

开始使用 ReactJS 的 道具验证功能道具验证功能，正如文档所说，它只能在“开发模式”下工作，这是出于性能原因。

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

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

105077 次浏览
小开

是的，没有很好的记录，但是在 ReactJS 下载页上谈到了开发和生产模式:

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

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

要处于“生产”模式，只需包括简化版本 react-0.9.0.min.js

小开
最佳答案

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

最终的魔力在于在整个代码库中反应嵌入对 process.env.NODE_ENV的引用; 这些引用就像一个特性切换。

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

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

禁用“ dev mode”的正确方法是通过您选择的 bundle。

网络包

在 webpack 配置中使用 DefinePlugin，如下所示:

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

浏览器化

使用 羡慕吧转换并使用 NODE_ENV=production(Windows 上的 "set NODE_ENV=production")运行浏览器生成步骤

结果

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

意外收获

当缩小转换后的代码时，你可以利用“死码删除”。DCE 是当缩小器足够聪明，意识到: "production" !== "production"是 一直都是假，所以将只删除任何代码在 if 块节省你的字节。

小开

如果您使用的是类似于这样的 ReactJS.NET/Webpack 教程，那么据我所知，您不能使用 process.env 来切换 React 开发模式的开关。这个示例直接链接到 react.js (参见 Index.cshtml) ，所以您只需要选择。或者通过更改 URL 的非缩小变量。

我不确定为什么会这样，因为示例的 webpack.config.js 有一个注释，似乎暗示 externals: { react: 'React' }可以完成这项工作，但是接下来会直接在页面中做出反应。

小开

我把这个贴在别处了，但是，坦白地说，这里会是一个更好的地方。

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

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.

反应 -dom，反应 -dom，反应 -Redux 的行为是相似的。 reux 显示一个警告信息。我相信反应 -dom 也是如此。

因此，很明显，我们鼓励您使用 /dist的生产版本。

然而，如果你缩小 /dist版本，webpack 的 UglifyJsPlugin 将会抱怨。

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

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

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

  • Webpack 的工作量更少，完成得也更快一些
  • 反应文件说 /dist/react.min.js是为生产而优化的。我没有看到证据证明 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } + uglify 可以做到像“/dist/react.min.js”那样好。没有证据表明你得到了相同的结果代码。
  • 我从 uglify 得到1条警告信息，而不是从 response/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用户:

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

Prod.js (取自 docs)

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 的环境变量:

    “脚本”: { “ 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 以确定我们是处于开发模式还是生产模式) ，如果我们处于开发模式，则禁用最小化生成的 bundle，以便我们可以看到组件的实际名称。我们需要在我们的 Webpack.config.js文件中使用 webpack 的 优化属性:

    优化: { NodeEnv: process.env.NODE _ ENV, 最小化: process.env.NODE _ ENV = = ‘ production’ }

Webpack v4.41.5，React v16.9.19，cross-env v7.0.0，node v10.16.14


提交答案