私はそのようなプロジェクト構造を持ちたいです:
./app/package.json
./app/src/index.js
./widget1/package.json
./widget1/src/index.js
./widget2/package.json
./widget2/src/index.js
./widget3/package.json
./widget3/src/index.js
ご想像のとおり、このプロジェクトは 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でそれを行うことは可能ですか?
または少なくともそれに近い何か？
ありがとう