如何打開/關閉 ReactJS“開發模式”？

Question

開始使用 ReactJS 的prop 驗證功能，正如文檔所說，出於性能原因，該功能僅適用於“開發模式”。

React 似乎正在驗證我注釋的特定組件的屬性，但我不記得明確打開“開發模式”。

我嘗試尋找如何觸發/切換開發模式，但沒有任何運氣。

Answer 1

另一個答案假設您正在使用來自react的外部預構建文件，而正確的是大多數人不會或應該將 React作為包使用。 此外，在這一點上幾乎每個陣營庫和包也依賴於相同的約定來切換開發時間佣工停產期間。 只需使用縮小的反應，就可以將所有這些潛在的優化留在桌面上。

歸根結底，React在整個代碼庫中嵌入了對process.env.NODE_ENV引用; 這些就像一個功能切換。

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

以上是最常見的模式，其他庫也遵循它。 因此要“禁用”這些檢查，我們需要將NODE_ENV切換為"production"

禁用“開發模式”的正確方法是通過您選擇的捆綁器。

的WebPack

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

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

Browserify

使用Envify轉換並使用NODE_ENV=production運行browserify構建步驟（在Windows上"set NODE_ENV=production" ）

結果

這將生成輸出包，其中所有process.env.NODE_ENV實例都替換為字符串文字： "production"

獎金

縮小轉換后的代碼時，您可以利用“死代碼消除”。 DCE是指minifier足夠聰明，意識到： "production" !== "production" 總是假的，所以只刪除if塊中的任何代碼，節省你的字節。

Answer 2

是的，它沒有很好的文檔，但在ReactJS 下載頁面上它討論了開發和生產模式：

我們提供了兩個版本的React：一個用於開發的未壓縮版本和一個用於生產的縮小版本。 開發版本包含有關常見錯誤的額外警告，而生產版本包括額外的性能優化並刪除所有錯誤消息。

基本上，React的未公開版本是“開發”模式，而React的縮小版本是“生產”模式。

要處於“生產”模式，只需包含縮小版本react-0.9.0.min.js

Answer 3

我在其他地方貼了這個，但坦率地說，這里會是一個更好的地方。

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

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

你可以從這里找到工作的

Answer 5

如果你正在使用這個ReactJS.NET / Webpack教程 ，你就不能使用process.env來打開/關閉React開發模式。 此示例直接鏈接到react.js（請參閱Index.cshtml ），因此您只需通過更改URL來選擇.min.js或非縮小版本。

我不確定為什么會這樣，因為樣本的webpack.config.js有一個注釋似乎意味着externals: { react: 'React' }將完成這項工作，但隨后繼續並包括直接反應這頁紙。

Answer 6

僅適用於 Webpack v4用戶：

指定mode: production和mode: development Webpack配置中的mode: development將默認使用DefinePlugin定義process.env.NODE_ENV 。 無需額外的代碼！

webpack.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

Answer 7

我使用通過 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