3

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

1 に答える 1

0

質問を受け取っていない場合は申し訳ありませんが、最近、あなたが提供したリンクの記事に基づいてプロジェクトを作成しました。両方のアプリケーションをホストし、その一部をchunk.jsランタイムにロードすることはできませんか? この特定の記事の例がどのように機能するかです。記事で提供されている例があります。ランタイムに動的にロードされるさまざまなマイクロフロントエンドを持つ一部のレストラン アプリ。それはまさにあなたが必要とするものではありませんか？

以下のコードは、この特定の例の「核心」です。見てください。

componentDidMount() {
    const { name, host } = this.props;
    const scriptId = `micro-frontend-script-${name}`;

    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;
    }

    fetch(`${host}/asset-manifest.json`)
      .then(res => res.json())
      .then(manifest => {
        const script = document.createElement('script');
        script.id = scriptId;
        script.src = `${host}${manifest['main.js']}`;
        script.onload = this.renderMicroFrontend;
        document.head.appendChild(script);
      });
  }
于 2020-02-16T10:17:15.023 に答える