UMD を使用してロールアップを使用して ng2 モジュールをバンドルしようとしていますが、意図したように ng2 の依存関係が除外されていません。
ロールアップ オプション:
{
format: "umd",
moduleName: "mymodule",
dest: "dist/app.bundle.umd.js",
sourceMap: true
}
ノード解決プラグイン(rollup-plugin-node-resolve)
nodeResolve({
jsnext: true,
module: true,
skip: [
"@angular/common",
"@angular/compiler",
"@angular/compiler-cli",
"@angular/core",
"@angular/forms",
"@angular/http",
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/platform-server",
'rxjs'
]
}),
これの出力は次のとおりです。
exports.AppModule = __decorate([
_angular_core.NgModule({
imports: [
_angular_platformBrowser.BrowserModule,
_angular_http.HttpModule
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent],
exports: [AppComponent]
})], exports.AppModule);
ng2 の依存関係をスキップすることで、Rollup がグローバルな依存関係を作成したよう_angular_core
です。_angular_http
_angular_platformBrowser
依存関係を保持したいが、グローバルな依存関係としてではありません。たとえば、これはtsc
をターゲットにした場合に生成されるものumd
です:
"use strict";
var core_1 = require("@angular/core");
var app_component_1 = require("./app.component");
var platform_browser_1 = require("@angular/platform-browser");
var http_1 = require("@angular/http");
var AppModule = (function () {
function AppModule() {
}
return AppModule;
}());
AppModule = __decorate([
core_1.NgModule({
imports: [
platform_browser_1.BrowserModule,
http_1.HttpModule
],
declarations: [app_component_1.AppComponent],
providers: [],
bootstrap: [app_component_1.AppComponent],
exports: [app_component_1.AppComponent]
})
], AppModule);
exports.AppModule = AppModule;
グローバルな依存関係が定義されているのではなく、ステートメントが UMD モジュールに埋め込まれていることがわかりrequire
ます (これは私が達成しようとしているものです)。
ロールアップを正しく使用していない可能性があります。私は何を間違っていますか?
おそらくロールアップはこれには間違ったツールです。誰かが推奨できるより良いツールはありますか? ビルドにgulpを使用しています。