angular2 如何在没有 ng2 依赖项的情况下捆绑 UMD 模块

Question

我正在尝试使用 rollup 来使用 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;

您可以看到 require 语句嵌入到 UMD 模块中(这是我试图实现的)，而不是定义全局依赖项。

我可能没有正确使用汇总。我究竟做错了什么？

也许 Rollup 是错误的工具，有人可以推荐更好的工具吗？我正在使用 gulp 进行构建。

Answer 1

我得到了 rollup 工作。

构建的目标是 es6 模块，然后使用汇总:https://github.com/rollup/rollup/wiki/Migrating-from-Esperanto

世界语也起作用并引导我找到了解决方案。虽然它已被弃用，但它确实会产生更清晰、更易读的代码:https://www.npmjs.com/package/esperanto

第一步:编译成es6模块

tsc --module es6

第 2 步:使用 rollup 创建 UMD bundle

const pkg = require('./package.json')
const rollup = require('rollup');

gulp.task('rollup:module', function() {
  rollup.rollup({
    // no more `base` – internal module paths
    // should be relative
    entry: pkg.main
  }).then( function ( bundle ) {
    bundle.write({
      // you can do `var umd = bundle.generate({...})
      // instead, and write the file yourself if
      // you prefer
      dest: `${pkg.name}.bundle.umd.js`,

      // use this instead of `toUmd`
      format: 'umd',

      // this is equivalent to `strict: true` -
      // optional, will be auto-detected
      exports: 'named',

      // `name` -> `moduleName`
      moduleName: pkg.name,

      // `names` -> `globals`
      globals: {
        'other-lib': 'otherLib'
      }
    });
  });

rollup 的好处在于它可以对更小的优化包进行 tree shaking。您还可以轻松定位多种包格式:

//UMD
bundle.write({
  dest: `dist/${pkg.name}.bundle.umd.js`,
  format: 'umd',
  exports: 'named',
  moduleName: pkg.name,
  globals: {
  }
});

//CommonJS
bundle.write({
  dest: `dist/${pkg.name}.bundle.cjs.js`,
  format: 'cjs',
  exports: 'named',
  moduleName: pkg.name,
  globals: {
  }
});

//AMD
bundle.write({
  dest: `dist/${pkg.name}.bundle.amd.js`,
  format: 'amd',
  exports: 'named',
  moduleName: pkg.name,
  globals: {
  }
});