問題タブ [webpack-hmr]

ファイルに変更を加えるたびに、ブラウザーの livereloading のパフォーマンスに問題がありjsます。私のgulpセットアップでは、次の時計があります。

jsしたがって、ファイルが変更されるたびに、jsおよびlintタスクがトリガーされます。それらは次のとおりです。

この設定では、jsファイル変更時の livereload はスケーリングしません。プロジェクトが大きくなるにつれて、ライブ リロードに時間がかかります。約 12 個の JS ファイルを含む小さなプロジェクトでも、リロードあたり 3.8 秒かかります。

問題は、jsファイルが変更されるたびに、プロジェクト内のすべてのファイルを反応させてバンドルしていることです。これは高価な操作であり、変更したファイル以外のjsすべてのファイルに対して完全に冗長です。jsライブ リロードを処理するより良い方法は何ですか? webpack がホット モジュール リロードを使用していることは知っていますが、これにgulp相当するものはありますか?

React HMR (および Babel) で Webpack をセットアップできません。私のセットアップは、あちこちで見つけた多くの例に似ているように思えます。

私のpackage.json開発依存:

package.json (ここで完了)

そして私のbabelrc設定

私package.jsonのスクリプト:

私のウェブサイトでは何も読み込まれず、単にエラーが発生します

キャッチされないエラー: locals[0] はmodule、ホット モジュール置換 API が有効になっているオブジェクトではないようです。envBabel 設定の section を使用して、本番環境で react-transform-hmr を無効にする必要があります。README の例を参照してください: https://github.com/gaearon/react-transform-hmr

React プロジェクトのプロダクション ビルドを作成しようとしていますが、間違った構成が選択されます。

開発版では、HMR (Hot Module Replacement) を使用しています。これは、.babelrc の下で構成されenv > development > pluginsます。余分なノードを追加するenv > productionと、無視されるようです。HMR で開発構成を使用しているため、エラーが発生します。

キャッチされないエラー: locals[0] はmodule、ホット モジュール置換 API が有効になっているオブジェクトではないようです。envBabel 設定の section を使用して、本番環境で react-transform-hmr を無効にする必要があります。README の例を参照してください: https://github.com/gaearon/react-transform-hmr

もちろん、その情報は確認しましたが、すべて正しいようです。.babelrc の開発構成から HMR プラグインを削除すると、実際に運用ではなく開発構成を使用していることを証明して動作します。これが私のファイルです：

パッケージ.json

.babelrc

でわかるようにpackage.json > scripts > deploy、BABEL_ENV を明示的に「運用」に設定しています。

なぜこうなった？本番ビルドで HMR プラグインが無視されるようにするにはどうすればよいですか?

ところで、検索すると React-transform-HMR Github ページの問題 #5 につながることが多く、これは明確な解決策のない長いスレッドです。

編集 2016.03.30: リクエストに応じて webpack 構成の Babel 部分を追加します。編集 2016.04.06: リクエストに応じて webpack ファイル全体を追加します。

webpack.production.config.js

HMR で webpack 2 を試しているところ、奇妙な問題が発生しました。各変更の後、増分更新は非常に迅速に終了し、メッセージCompilation needs an additional pass and will compile again.が表示されます。その後、ビルドが完了するまで数秒かかります。

問題は、各変更の後、ビルド (2 回目のパス) が約 0.5 秒長く続き、しばらくすると使用できなくなることです。

スタイル、css、sass、およびbabelローダーを備えたwebpack 2.1.0ベータ4を使用しています。

ビルド時間を一定にする方法についてのアイデアをいただければ幸いです。

React アプリケーションを構築するための Web ベースの IDE のアイデアをいじっています。基本的に、ユーザーはclassブラウザ内で完全に定義および変更します。

を使用してクラスを作成できることはわかってReact.createClassいますが、ユーザーがクラスに変更を加えたときに、クラスを削除または再定義するにはどうすればよいですか。

Webpack HMR がこれを行うことは知っていますが、ブラウザで完全に行うにはどうすればよいですか?

ホットモジュール置換を使用して Webpack で React プロジェクトをビルドしようとしています。ただし、Webpack はファイルの変更を無視します。私は何を間違っていますか？私の設定：

私のファイル構造:

モジュールファイルが「src」フォルダーにある場合、ホットモジュール交換は正常に機能します。それ以外の場合、変更時に何も起こりません。

ありがとう！