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;

您可以看到require语句嵌入在 UMD 模块中（这是我想要实现的），而不是定义全局依赖项。

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

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

4

2 回答 2

2

我得到了汇总工作。

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

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

第一步：编译成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'
      }
    });
  });

rollup 的好处是它可以为更小的优化包进行树摇动。您还可以轻松定位多种捆绑格式：

//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: {
  }
});
于 2017-02-21T14:26:48.080 回答
1

我发现一个名为typescript-library-bundler的工具非常有用。

我希望这对其他人有所帮助。

于 2017-09-30T23:30:43.847 回答