問題タブ [react-hot-loader]

コマンドでビルドを実行すると、この問題が発生しますnpm run build。

webpack.config.js

そして app.jsx

私は何を間違えましたか？先に進まない2日目です。SCSS、jsx、react-hot-loader を使おうとしていますが、うまくいきません。

通常、Chrome コンソールに次のよう1+1に入力すると、次の 2 つのことが行われます。

• あなたの表情をあなたに返す
• 式の評価結果を表示する

var x = 1これが、コンソールに入ると、コンソールに追加された 2 つの行が表示される理由です。

• > var x = 1
• <- undefined

このvar代入は に評価されるためundefinedです。

react / redux を使用して webapp を開発していますが、最近、コンソールで何かを評価しようとしました ( 1 + 1)。私の絶対的な衝撃恐怖に、コンソールは私を拒否しました! 自分の発言が反響してくるのを見ましたが、結果はわかりませんでした。

複数のものを入力すると (キープレスが散在するランダムな意味不明なものEnter)、すべてがエコーバックされますが、何も評価されません(つまり、コンソールでランダムな文字列をスローしてもundefineds またはs が表示されません)。ReferenceError

1. コンソールは、同じウィンドウ内の他のタブで正常に動作します。
2. 私のアプリケーションは期待どおりに動作します。
3. 私のアプリケーションは、reactとreduxを使用して構築されています
4. webpack-dev-serverを使用してアプリケーションをローカルで実行しています
5. react-hot-loaderと webpack HotModuleReplacementPluginでホット アップデートを使用しています
6. アプリケーションが実行しているさまざまな操作によって、コンソールに記録された XHR が引き続き表示されます。
7. console.logアプリケーションによって生成されたメッセージがまだ表示されます。

CPU プロファイラー (開発ツール -> [プロファイル] タブ) をしばらく実行し、アプリを少しクリックしました。プロファイラーは異常なアクティビティ (ロックアップなど) を示さず、アプリの使用中に予想される動作を示しました。

Chrome devtools コンソールが直接入力を無視する原因は何ですか?

React + Redux + Webpack + WebpackDevserverを使用してい ます。ホットローダーが起動されると、すべてのレデューサーが初期状態にリセットされます。

どういうわけかレデューサーを実際の状態に保つことはできますか?

私のWebpack構成には以下が含まれます：

私のレデューサーの統計:

次の方法で Webpack Dev-Server を起動します。

私は redux で反応することを学び始めています。このhttps://github.com/davezuko/react-redux-starter-kitスターター プロジェクトを自分の旅に使用したいと思っています。

クリーンでシンプルなので、今よりも少し大きなものを作りたいと思っています。そのためには、バックエンド サーバーが必要です。私はすでに Express で作成したものを持っており、Angular アプリでそれを使用しています。しかし、このスターター キットをどのように機能させるべきかについて頭を悩ますことはできません。ホットリロード機能のためにポート 3000 で実行されている koa を使用しており、この 2 つ (ホットリロード/API) を同時に機能させることはできません。経験豊富な人にとっては、ポート 3000 で実行されている 1 つのルートを使用して、この単純な Express サーバーのすべてにプラグインするのは非常に簡単なはずです。

私のコードをあなたと共有したいのですが、どこから始めればいいのかわからないので、私には何もありません。非常に多くのプラグイン/可動部分があり、理解する必要があるため、頭が回転します:) したがって、これらすべてを使用していくつかのプロジェクトに取り組み、途中ですべてを学ぶことを計画しています。

私はそのようなプロジェクト構造を持ちたいです:

ご想像のとおり、このプロジェクトは NPM ウィジェット サブプロジェクトの集合体のようなものであり、appsrcフォルダーは実際のアプリであり、さまざまなウィジェット サブプロジェクトを使用します。

ウィジェット間の明確かつ厳密な分離が必要です。私の現在の経験では、開発者にはウィジェット間に不要な循環依存関係を導入する傾向があることがわかっているためです。

実際には、これらのウィジェットはすべて、React、JQuery、Lodash の 3 つの共通 JS ライブラリを持つ ReactJS ウィジェットになります。これらの 3 つのライブラリを必要としないものもあれば、 のような追加のライブラリが必要なものもあります。またはpackery、これらすべてのウィジェットは、 のような共通のテスト ライブラリも共有する必要があります。彼らは絶対に同じ共通ライブラリ バージョンを共有する必要があります (明らかに、プロジェクトに異なるバージョンの React を使用したり、バンドル サイズを大きくしたりしたくないためです)。react-slickreact-date-pickermocha

たとえば、- widget1React + Lodash + react-date-picker(npm lib、私のものではありません) に依存する DatePicker ウィジェットにすることができます - アプリ プロジェクトは、React + Redux + Normalizr + すべてのウィジェットとそれらの推移的な依存関係に依存することができます。react-date-picker

すべてのウィジェットはプレゼンテーション コンポーネントであり、高度な依存関係は必要ありません。React のみに依存するものもあります。一部には Redux レデューサーが含まれている場合がありますが、これは単純な古い JS コードであるため、依存関係は必要ありません。

ウィジェットの数は非常に多くなる可能性があり、ライブラリの更新ごとに 200 個の package.json ファイルを編集したくありません (ただし、最終的にはコードを使用してそれを処理できます)。

の内部widget1/srcでは、からのコードを要求することを禁止する必要がありますwidget2。ウィジェットが別のウィジェットに依存できる必要がある場合、この依存関係はクライアント ウィジェットの package.json で明示的に設定する必要があります。

Webpack を使用してビルドし、すべてのウィジェットを個別にテストできるはずです。また、すべてのサブプロジェクトを含むプロジェクト全体を一度にビルドおよびテストし、単一の集約されたグローバル テストおよびコード カバレッジ レポートを作成できる必要があります。

開発者の経験を悪くしたくありません。React と Webpack では、ホット コードのリロードが許可されています。ブラウザに実際のアプリがあり、ウィジェットのコードを変更すると、変更がライブで表示され、react-hot-loadernpm コマンドを実行したり F5 キーを押したりする必要がなくなります。

私が探しているのは、dependencyManagement通常、すべてのサブプロジェクトのバージョンを parentPOMに設定し、バージョンが何らかの方法ですべての子プロジェクトに継承される Java Maven のシステムと同等です。すべての子プロジェクトは (明示的な依存関係が追加されない限り) 相互に認識できませんが、親プロジェクトで宣言されたライブラリに依存していると言えます。すべての lib バージョン番号は、親プロジェクトで設定できます。

NPMとWebpackでそれを行うことは可能ですか?

または少なくともそれに近い何か？

ありがとう

このエラーは、react-hotこのチュートリアルに従ってアレイにローダーを追加した後に発生しました: https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement

私は得てError: Cannot define 'query' and multiple loaders in loaders listいます。

私は Babel 6 にアップグレードし、webpack.config ファイルで react-hot-loader で動作させようとしましたが、これがあります:

上記の構成では、次のエラーが発生します。

Webpack は、クエリが for か かどうかで混乱する可能性がありreact-hot-loaderますbabel。

この問題を回避するにはどうすればよいですか?