Angular 2 RxJS 库中的 Rollup Tree Shaking 意外标记

Question

当我从 Angular 2 docs 使用 Rollup 时，我在尝试执行汇总配置 js 文件时遇到错误：

 Unexpected token
    node_modules/rxjs/util/isArrayLike.js (2:78)
    1: "use strict";
    2: var isArrayLike_1 = function (x) { return x && typeof x.length === 'number'; });
                                                                                     ^
3: //# sourceMappingURL=isArrayLike.js.map

当我查看 rxjs 存储库中的 isArrayLike.js 文件时，我可以看到该文件包含以下代码：

exports.isArrayLike = (function (x) { return x && typeof x.length === 'number'; });

看起来 tree shaking step rollup 删除了其中一个括号 this one -->(function (x) 并且 tree shaking 失败了。

如果我手动删除 rxjs/isArrayLike.js 文件中的最后一个括号，汇总工作正常。

有什么办法可以解决这个问题吗？

"rollup-plugin-commonjs": "^7.0.0" "rxjs": "^5.2.0"

Answer 1

2017 年 2 月 22 日更新

正如 Toby 提到的，最近的软件包更新似乎有一些重大变化。我还不确定是哪个软件包导致了这个问题。

下面列出的当前版本没有问题。当我更新到最新版本时，出现与您相同的错误：

"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/compiler-cli": "2.4.7",
"@angular/core": "2.4.7",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/platform-server": "2.4.7",

"rxjs": "5.1.0",
"zone.js": "0.7.6"

"gulp-typescript": "3.1.4",
"systemjs": "0.20.7",
"typescript": "2.1.6",

一般解决方案

使用 NGC 编译源代码（es5 目标和 es6 模块）。这将在 src 文件夹中创建工厂，并在 dist 文件夹中创建元数据和 .d.ts 文件。

接下来通过在 tsconfig-aot.json 中设置以下选项来创建所需的元数据和 .d.ts 文件：
```
"compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "declaration": true,
     ...
 },
"angularCompilerOptions": {
    "genDir": "",
    "skipMetadataEmit" : false
 }
```

使用tsc重新编译src文件夹；使用插件内联 HTML。我用了 gulp-inline-ng2-template:

   gulp.task('compile:es6', function () {
       return gulp.src(['./src/**/*.ts'])
         .pipe(inlineNg2Template({ base: '/src' }))
         .pipe(tsc({
             "target": "es5",
             "module": "es6",
             "moduleResolution": "node",
             "experimentalDecorators": true,
             "emitDecoratorMetadata": true,
             "lib": ["es6", "dom"]
    }))

将 HTML 文件从 src 文件夹复制到 dist 文件夹。这部分是必要的，因为 NGC 是在内联 HTML 模板之前编译的。结果，元数据仍然认为您的组件正在使用 templateURL。希望社区能提出一个好的内联-html 插件，这样就不再需要这一步了。

使用 rollup 摇动树并创建 bundle：

gulp.task('rollup:module', function() {
  return rollup.rollup({
    entry: pkg.main,
    onwarn: function (warning) {
      // Skip certain warnings

      // should intercept ... but doesn't in some rollup versions
      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
      // intercepts in some rollup versions
      if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }

      if ( warning.message.indexOf("treating it as an external dependency") > -1 ) { return; }

      if (warning.message.indexOf("No name was provided for external module") > -1) { return; }

      // console.warn everything else
       console.warn(warning.message);
    }

 }).then( function ( bundle ) {
    bundle.write({
       dest: `dist/${pkg.name}.bundle.umd.js`,
       format: 'umd',
       exports: 'named',
       moduleName: pkg.name,
       globals: {
       }
     });
     bundle.write({
        dest: `dist/${pkg.name}.bundle.cjs.js`,
        format: 'cjs',
        exports: 'named',
        moduleName: pkg.name,
        globals: {
        }
     });
     bundle.write({
        dest: `dist/${pkg.name}.bundle.amd.js`,
        format: 'amd',
        exports: 'named',
        moduleName: pkg.name,
        globals: {
        }
        });    
       });
    });
   .pipe(gulp.dest('./dist/src'));
});

当您发布包（即发布到 npm）时，请确保将 js、.d.ts 和 .metadata.js 文件包含在同一个 dist\src 文件夹中，并且确保您的主包入口点有一个 index.js 文件。

捆绑包允许您的用户使用任何动态模块加载器加载您的包；需要 js、.d.ts. 和 metadata.js 文件才能使您的包符合 AOT - 这意味着其他人可以安装您的库并创建 AOT 静态包。

希望这对您有所帮助，干杯！

Demo Starter Application (AOT Bundling)