[解決済み] ReactJSの「開発モード」をON/OFFするには？

質問

ReactJSの propの検証機能 を使い始めました。ドキュメントによると、パフォーマンス上の理由から「開発モード」でのみ機能するようです。

Reactは私がアノテーションした特定のコンポーネントのプロパティを検証しているようですが、私は明示的に「開発モード」をオンにした覚えはありません。

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

どのように解決するのですか？

他の回答は、reactの外部ビルド済みファイルを使用することを前提としており、正しいのですが、それはほとんどの人々がしようとしている方法または を使用する必要があります。 パッケージとして React を消費する方法ではありません。さらに、現時点では、ほとんどの React ライブラリおよびパッケージは も は、実運用中に開発時間ヘルパーをオフに切り替えるために、同じ規則に依存しています。最小化された React を使用するだけで、これらすべての潜在的な最適化もテーブルの上に置いておくことになります。

最終的に、このマジックは、React が process.env.NODE_ENV への参照をコードベース全体に埋め込むことで、機能トグルのように動作します。

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

上記は最も一般的なパターンであり、他のライブラリも同様です。そこで、これらのチェックを無効にするには、以下のように NODE_ENV を "production"

dev mode を無効にする適切な方法は、選択したバンドルを通して行うことです。

ウェブパック

を使う。 DefinePlugin をwebpackの設定に追加してください。

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

ブラウザ化

ブラウザで Envify 変換を行い、browserify のビルドステップを NODE_ENV=production ( "set NODE_ENV=production" Windowsの場合)

結果

これは、出力バンドルに process.env.NODE_ENV を文字列リテラルに置き換えた出力バンドルが生成されます。 "production"

ボーナス

変換されたコードを minify するとき、"Dead Code Elimination" を利用することができます。DCE とは、minifier が十分に賢く、それを認識することです。 "production" !== "production" は 常に falseなので、ifブロック内のコードを削除するだけで、バイト数を節約できます。