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

时间:2014-03-01 19:02:19

标签: reactjs

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

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

我尝试了如何触发/切换开发模式,但没有运气。

7 个答案:

答案 0 :(得分:118)

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

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

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

以上是最常见的模式,其他库也遵循它。所以去#34;禁用"我们需要将这些检查切换为NODE_ENV"production"

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

的WebPack

使用webpack配置中的DefinePlugin,如下所示:

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

Browserify

使用Envify转换并使用NODE_ENV=production(Windows上为"set NODE_ENV=production")运行browserify构建步骤

结果

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

加成

当缩小转换后的代码时,您可以利用"死代码消除"。 DCE是指minifier足够聪明,意识到:"production" !== "production" 始终 false,因此只删除if块中的任何代码,保存字节。

答案 1 :(得分:48)

是的,它没有很好的文档记录,但在ReactJS download page上它讨论了开发和生产模式:

  

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

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

要进入“生产”模式,只需包含缩小版react-0.9.0.min.js

答案 2 :(得分:15)

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

假设您使用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 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'))
    }
  }

答案 3 :(得分: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

找到合适的工作

答案 4 :(得分:1)

如果您正在使用此类ReactJS.NET / Webpack tutorial之类的工作,则根据我的意思,您无法使用process.env来打开/关闭React开发模式。此示例直接链接到react.js(请参阅Index.cshtml),因此您只需通过更改URL来选择.min.js或非缩小版本。

我不确定为什么会出现这种情况,因为示例的webpack.config.js有一条注释似乎意味着externals: { react: 'React' }会完成这项工作,但随后继续并且包括直接反应到页。

答案 5 :(得分:0)

仅针对 Webpack v4用户:

在Webpack配置中指定mode: productionmode: 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

答案 6 :(得分:0)

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