Question

当我使用来自Angular 2 docs的Rollup时，我在尝试执行rollup config 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

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

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

看起来在树上摇动步骤累加会移除其中一个括号this one -->(function (x)并且树摇动失败。

如果我手动删除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文件夹中创建工厂，在.d.ts文件夹中创建元数据和dist文件。

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

使用src重新编译tsc文件夹;使用插件内联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。希望社区能够提供一个好的inline-html插件，这样就不再需要这一步了。

使用汇总来摇动树并创建包：

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），请确保在同一dist\src文件夹中包含js，.d.ts和.metadata.js文件，并确保您有索引主包入口点的.js文件。

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

希望这有帮助，干杯!

Demo Starter Application (AOT Bundling)