3

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を使用しています。

4

2 に答える 2