問題タブ [micro-frontend]

Webpack で構築された 2 つの JavaScript プロジェクトを管理しているとします。

• User-WebsiteというWeb サイト
• External-Moduleという JavaScript モジュール

マイクロ フロント エンドアーキテクチャで説明したのと同じ理由で、2 つの別々のプロジェクトを使用していることに注意してください。

User-Websiteが必要に応じて (任意の JavaScript モジュール技術を使用して) External-Moduleを動的にロードできるようにしたいと考えています。私のUser-Websiteは、ビルド時にExternal-Moduleに到達する URL を認識しています。

User-WebsiteとExternal-Moduleの両方で必要なテクノロジを選択できます。

私は解決策を探しています：

• これは簡単に実装できます (おそらく、Webpack がすでにチャンクを動的にロードするために処理している JSONP でしょうか?)
• これにより、 User-WebsiteとExternal-Moduleの両方で大きなオーバーヘッドが追加されることはありません(たとえば、JavaScript モジュールは見た目は良いですが、多くのポリフィルが必要です)。

私の質問はhttps://github.com/webpack/webpack/issues/7526に関連しています

External-Moduleで JSONP ライブラリ出力を使用しようとしましたが、それをUser-Websiteにロードする方法がわかりません。

User-WebsiteでSystemJSを使用してExternal-Moduleを動的にロードすることも考えています。

• 内部 JSONP メカニズムを Webpack 内の SystemJS に置き換えることもできます (m バンドルに JSONP メカニズムを保存するため)。
• SystemJSはRequireJSよりも見栄えが良く、よりモダンに見えます
• これには、SystemJS (s.jsのみ) のオーバーヘッドを追加する必要があります。可能な限り少ない依存関係を使用しようとしています。

問題が発生しました。以下はシナリオです。

4〜5つの画面/コンポーネント（ユーザーの管理、通知の管理、ロールの管理など）を持つvueアプリケーション（my-adminマイクロアプリ）を開発し、次のように書いたrouter.jsを作成しました：

以下のように、このルーターオブジェクトをmain.jsにインポートしました。

そして最後に、このマイクロアプリを main.js の Web コンポーネント (MainLayout コンポーネント)として以下のようにラップします。

次のコマンドでこのマイクロアプリをビルドします。

このマイクロアプリは以上です。このマイクロアプリを個別に実行すると、完全に実行されます。

しかし、私のシナリオでは、Vueのみで開発されたシェル アプリケーション (my-shell) があります。このシェル アプリケーションには独自の vue ルーターもあり、以下のように main.js にインポートされます。

. シェル ルータ:

そして、このルーターオブジェクトを以下のように my-shell の main.js にインポートしました:

そして、my-shell の index.html 内にタグ(内) を追加して、以下のようにマイクロ アプリのビルド (my-admin.js ファイル) をロードしました。

しかし、私が my-shell application を開始しているとき。それは以下のエラーをスローしています:

このエラーを取り除くにはどうすればよいですか?

最近、私たちのチームは、レガシー製品にマイクロ フロント エンド アーキテクチャを実装することを決定しました。これは、Asp.Net aspx ページと javascript/jquery を使用して開発されました。

昨年、アプリケーションで一部のビューに angular の使用を開始しました。angular をロードするには、prod ビルド ファイルを .net プロジェクトに配置し、コンポーネントを aspx マスター ページにロードします。

保留中の残りの古いビューを、マイクロ フロント エンド アーキテクチャを使用して角度付きに移行することを計画しています。

そのため、私は同じことについて小さな poc を行い、アーキテクチャをそれに近い場所に到達させることができました。

この URL に従って実装し、ポート 4400 で実行しました。

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

そして、私の既存のAngularプロジェクトでは、customElementsを使用してこれをロードしています

そして、これは期待どおりに機能し、開発環境に customElements をロードできます。しかし、本番環境では、実装方法が本当にわかりません。

私の懸念：

1. prod の一部のポートでもアプリを実行する必要がありますか? はいの場合、それを行う方法と、ユーザーがポートを変更できるように動的にすることができます。.net アプリケーションでの方法。クライアントはそのポートですでに何かを実行している可能性があるため

2. 私が達成しようとしている方法は正しいかどうかです。

前もって感謝します。