Javascript RxJS库中的Angular 2汇总树抖动意外标记

当我从使用Rollup时，尝试执行Rollup config js文件时出现错误：

Update Feb 22, 2017
As Toby mentioned, there seems to be some breaking changes in the recent package updates.  I'm not sure which package is causing the issue yet.

The current versions listed below works without issues. When I update to the the latest version, I get the same error that you do:


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

更新日期2017年2月22日
正如托比提到的，在最近的软件包更新中似乎有一些突破性的变化。我还不确定是哪个软件包导致了这个问题

下面列出的当前版本可以正常工作。当我更新到最新版本时，会出现与您相同的错误：


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

接下来，通过在tsconfig-aot.json中设置以下选项来创建所需的元数据和.d.ts文件：

   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"]
    }))


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

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'));
});


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


使用rollup摇动树并创建捆绑包：


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

捆绑包允许用户使用任何动态模块加载器加载包；js、.d.ts.和metadata.js文件是使您的包与AOT兼容所必需的，这意味着其他人可以安装您的库并创建AOT静态捆绑包

希望这有帮助，
干杯

这似乎是rollup或commonjs插件中的一个bug。我还没有找到它的工作版本

以下是问题的链接（github）：

汇总：

commonjs插件：
我在2.4.8中遇到了同样的错误，但在对我的rollup.config.js进行了一些修补之后，我让它开始工作了

查看此处的my package.json和rollup.config.js：


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'));
});