9

プラグインをサポートする Web アプリを構築しようとしています。環境は Angular 2 (これまでのところ)、Typescript 2.1 および Webpack 2 です。プラグインがコンテンツを描画できる拡張ポイント (スロット) がいくつかあります。基本的にはコンポーネントがあります。実行時に既知の他のコンポーネントをホストできます (アイデアについては、「Angular 2 コンポーネントのマスター」の第 10 章を参照してください。実行時に Angular コンポーネントをコンパイルして「描画」する方法については、 SO + plunkerを参照してください)。

これが私が達成したいことです：

// in plugin.service.ts
loadPlugin(url)
{
    return System.import('absolute OR relative ?? plugin base path' + name)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

...

//content of the plugin file being imported
export default class HeaderButtonsPlugin {
    constructor() {}
    //useful things about the plugin
}

System.importWebpackを使用して実行時にモジュールをインポートしていますが、非推奨であることはわかっていますimportが、typescript自体ではまだサポートされていないため、typescriptを使用してモジュールを動的にインポートする唯一の方法です(こちらを参照)。（これを達成する他の方法はありますか？）

ここで、システムをテストするためだけに、以下のディレクトリ ツリーを使用して、プラグイン ディレクトリをアプリケーションの同じルート (src ディレクトリ) に含めました。これにより、webpack がコンパイル時にプラグイン コードの存在を認識し、プラグインとアプリケーションの両方を同じバンドルのセットにパックすることに注意してください。これは、プラグイン アーキテクチャ機能をテストするための簡略化です。フォルダ ツリーは次のとおりです。

- src
    - app
        - core
            - plugin.service.ts
    - plugins
        - pluginA
            - pluginA.plugin.ts

このようにインポートするpluginA.plugin.tsと、 System.import('relativePathToPluginA')すべてが期待どおりに機能します。システムは、プラグイン コンポーネントをロードしてコンパイルし、それを使用することもできます。

しかし、実際のシナリオでは、コンパイル時にプラグインを認識してはならないため、angular-cli を使用して新しいプロジェクトを作成し、pluginA ディレクトリを追加してから、app.module で参照しました。次に、プロジェクトをビルドし、js 出力をフォルダーに移動しましたD:\pluginDist\。次にmain.bundle.js、以下の例のように、上記の loadPlugin メソッドから を参照しました (url = 'main.bundle.js' を使用)。

loadPlugin(url)
{
    return System.import('D:\\pluginDist\\' + url)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

メイン バウンドルの参照が正しいかどうかはわかりませんが (Webpack の概念がいくつか欠けていることは確かです)、少なくともビルド アーティファクトであるため、試してみます。このように私はエラーがあります Unhandled Promise rejection: Cannot find module 'D:\pluginDist\main.bundle.js'. ; Zone: angular ; Task: Promise.then ; Value:

私が行った他のテストは

  • プラグイン プロジェクトの *.ts ファイルをトランスパイルし、webpack をまったくスキップするのでtsc、コマンド ラインに入力してpluginA.plugin.tsトランスパイル結果をインポートしようとすると、上記と同じエラーが発生しました。

  • 開発 Web サーバーが実際にファイル (.tmp) を提供するフォルダーに js の結果 (webpack またはプレーン tsc 変換の両方) を配置し、相対パスを介してそれらを参照します。これにより、webpack がコンパイル時に停止します。もちろん、パッキング中にプロジェクト ディレクトリ ツリー内のファイルを見つけることはありません。

どこに行けばいいのかわからないのですが、何かアドバイスはありますか??

私が達成したいのは、コンパイル時に不明なjsモジュールであるwebpackとtypescriptを使用して、動的にロードすることです。

4

1 に答える 1