Question

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

我得到了汇总工作。

为构建定位es6模块，然后使用汇总：https://github.com/rollup/rollup/wiki/Migrating-from-Esperanto

世界语也工作并带领我解决问题。虽然它已被弃用，但它确实产生了更清晰，更易读的代码：https://www.npmjs.com/package/esperanto

步骤1：编译为es6模块

tsc --module es6

步骤2：使用汇总创建UMD包

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'
      }
    });
  });

关于汇总的好处是，它可以为较小的优化束进行树抖动。您还可以轻松定位多种捆绑格式：

//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: {
  }
});

Answer 2

我找到了一个名为typescript-library-bundler的工具非常有用。

我希望能帮到别人。

angular2如何捆绑没有ng2依赖项的UMD模块

2 个答案:

步骤1：编译为es6模块

步骤2：使用汇总创建UMD包