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

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 -->(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",

通用解决方案

1. 使用 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
    }
   

2. 使用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"]
       }))
   

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

4. 使用 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 文件。

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

希望对您有所帮助，干杯!

Demo Starter Application (AOT Bundling)