ReactJS「開発モード」をオン/オフにする方法は？

ReactJSの使用を開始 プロップ検証機能。これは、ドキュメントによると、パフォーマンス上の理由から「開発モード」でのみ機能します。

Reactは、注釈を付けた特定のコンポーネントのプロパティを検証しているようですが、「開発モード」を明示的にオンにしたことを覚えていません。

開発モードをトリガー/トグルする方法を探してみましたが、うまくいきませんでした。

他の答えは、あなたが反応するから、外部事前に構築されたファイルを使用していると仮定して、正しいながら、それはほとんどの人がしようとしているかいないかである必要がありますパッケージとして反応消費します。さらに、この時点で、ほとんどすべてのReactライブラリーとパッケージも、同じ規則に依存して、本番稼働中に開発時間ヘルパーをオフに切り替えます。縮小された反応を使用するだけで、これらの潜在的な最適化もすべてテーブルに残ります。

結局のところ、マジックはprocess.env.NODE_ENVコードベース全体への参照を埋め込むReact に帰着します。これらは機能切り替えのように機能します。

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

上記は最も一般的なパターンであり、他のライブラリも同様です。したがって、これらのチェックを「無効にする」にはNODE_ENV、"production"

「開発モード」を無効にする適切な方法は、選択したバンドラーを使用することです。

ウェブパック

次のDefinePluginようにwebpack設定でを使用します。

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

Browserify

Envify変換を使用してbrowserifyビルドステップを実行しますNODE_ENV=production（"set NODE_ENV=production"Windowsの場合）

結果

これprocess.env.NODE_ENVにより、のすべてのインスタンスが文字列リテラルに置き換えられた出力バンドルが生成されます。"production"

ボーナス

変換されたコードを縮小するときに、「デッドコードの除去」を利用できます。DCEは、ミニファイアが次のことを実現するのに十分賢い場合"production" !== "production"です。常に falseであるため、バイトを節約するifブロックのコードを削除します。

ええ、それは本当に十分に文書化されていませんが、ReactJS ダウンロードページで、開発モードとプロダクションモードについて説明しています。

Reactには、開発用の非圧縮バージョンと本番用の縮小バージョンの2つのバージョンがあります。開発版には一般的な間違いに関する追加の警告が含まれますが、製品版には追加のパフォーマンス最適化が含まれ、すべてのエラーメッセージが削除されます。

基本的に、Reactの縮小版は「開発」モードであり、Reactの縮小版は「本番」モードです。

「プロダクション」モードにするには、縮小バージョンを含めるだけです react-0.9.0.min.js

私はこれを他の場所に投稿しましたが、率直に言って、ここがより良い場所でしょう。

npmを使用してReact 15.0.1をインストールするimport react from 'react'か、Reactの生のソースであるとしてreact = require('react')実行することを想定しています./mode_modules/react/lib/React.js。

Reactのドキュメントでは./mode_modules/react/dist/react.js、開発とreact.min.jsプロダクションに使用することをお勧めしています。

縮小すべきですか /lib/React.jsか、/dist/react.jsあなたは非生産コードを縮小されていることを警告メッセージが表示されます反応して、生産のために：

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は警告メッセージを表示します。リアクションドムもそうだと思います。

だからあなたは明らかに製造バージョンを使用することをお勧めします /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のドキュメントによる/dist/react.min.jsと、本番用に最適化されています。私はその証拠を読みませんでした'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglifyが '/ dist / react.min.js`と同じくらいうまく機能する。私はあなたが同じ結果のコードを得る証拠を読みませんでした。
• react / reduxエコシステムから3つではなく、uglifyから1つの警告メッセージが表示されます。

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を設定するために使用しました。製品の場合、エイリアスを次のように解決します

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

あなたはここから動作しているものを見つけることができます

このReactJS.NET / Webpackチュートリアルのようなものから作業している場合、私の知る限り、process.envを使用してReact開発モードのオン/オフを切り替えることはできません。このサンプルは、react.jsに直接リンクしています（Index.cshtmlを参照）あなただけのURLを変更することにより、.min.jsまたは非縮小さバリアントを選択する必要がありますので、）。

サンプルのwebpack.config.jsにはexternals: { react: 'React' }、ジョブが実行されることを意味するように思われるコメントが含まれているため、なぜそうなるのかはわかりませんが、先に進み、ページに直接反応します。

用のみのWebPACK v4のユーザー：

指定mode: productionしてmode: developmentお使いのWebPACKの設定で定義しますprocess.env.NODE_ENVデフォルトでDefinePluginを使用してされます。追加のコードは必要ありません！

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

私はWebpackを介して実行する手動のビルドプロセスを使用しているため、2つのステップからなるプロセスでした。

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、cross-env v7.0.0、node v10.16.14