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

时间:2017-02-20 21:07:26

标签: angular rollupjs

我正在尝试使用汇总来使用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进行构建。

2 个答案:

答案 0 :(得分:2)

我得到了汇总工作。

为构建定位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: {
  }
}); 

答案 1 :(得分:1)

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

我希望能帮到别人。