間接的に私たちは私たちの会社内で次の要件を持っているアンギュラ4 /活字体とNPM でロールアップを使用したい

Question

リモートJavascriptのURLを参照：

• 特定のチームがCDNのように集中する必要がJSライブラリを（作成します）
• これらのライブラリは、リモートのURLの後ろにあり、その理由は、これらのライブラリは、ライブラリ（アプリケーション）の消費者は、ライブラリを使用するには、NPMパッケージをインストール
• ）あまりにも頻繁に変更することである（アプリケーション内でローカルに存在してはならない
• ローカルにインストールNPMパッケージには、リモートURL
• NPMのパッケージには、活字体定義ファイルが含まれている背後に、既存のJSライブラリへのリモートリンクを置くJavascriptのファサードファイルまたはバンドルが含まれている
• の目標は、消費者が「doesnのことですURLを持つスクリプトタグを追加する必要はありません（彼はこれに気づくべきではありません）
• ローカルにインストールされたJavascriptファイルは、アプリケーションコードと共に束ねることができます
• 新しいバージョンのライブラリは、

Typescript/Javascript/NPM/Rollupを使用してこれを達成する最善の方法は何ですか？ commonJS構文に変換されたES2015構文を使用します。

Answer 1

溶液が複雑すぎます。 これらのJSライブラリを作成するチームは、バンドルをURLの後ろに置く必要があります。 チームはそのURLを置く必要があり、ユーザーが常に最新のバージョンを持つように、バンドルでeTagキャッシュを有効にする必要があります。新しいバージョンのバンドルがデプロイされている場合、http/1クライアントはバンドルを自動的に再ダウンロードする必要があります。

ユーザーはURLを自分で埋めなければなりません。情報がjsonファイル（マニフェストなど）にある場合は、jsonファイルのメカニズムを設定できます。

アプリケーションの開発者は、フレームワークライブラリのすべてのタイプを含むnpmによってd.tsファイルを受け取ることができました。リモートURLなので、モジュールをインポートする必要はありません。したがって、スクリプトタグのためにライブラリが参照されることが保証されているため、何もインポートする必要はありません。

Answer 2

ロールアップにはwebpack dll pluginと似ているとは思われませんので、私の答えは無関係に見えるかもしれませんが、ロールアップで似たようなものを探し始めることができます。

CDNに住んライブラリ：

1. 正確にエクスポートされたモジュールを必要とする方法を説明し、それに対応するDLL ReferenceとDLLを作成します。
2. 自己説明的なパスを使用して、一致するようにしてください。https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts}（クライアントのキャッシュの問題を避けるためにリクエスタは?<cacheBustingUID>を追加する必要があります）。通常のバージョン管理に加えて、versionフィールドにキーワードlatestを使用することをお勧めします。always true pathは、最新のバージョン（https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts}、https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts}）を示します。
3. このソリューションは、すべての点で、かなりいいですが、私があなたをrecommandます

module.exports = env => { 
    const libs = ((name, version, exts) => (
    exts.map(ext => `https://cdn.mydomain.com/${name}/${version}/${name}.${ext}`) 
))('foo', 'latest', ['js', 'd.ts', 'json']) 

    return Promise 
    .all(libs.map(fetch)) 
    .then([library, definitions, DLLReference] => { 
     // what to do? 
     // you can also inject the dynamic paths through `webpackDefinePlugin` 
    }) 
}