如何使用Rollup JS捆綁polyfills和外部庫？

Question

這是我第一次使用Angular 2.

我們運行aot和彙總以生成一個包。但是我們必須始終在index.html中添加polyfills（shim，reflect-metadata和zone.js），並使用script HTML元素。

是否可以將這個polyfills添加到包中？

另一個問題：如何添加外部JS庫捆綁。其實，像polyfills我們必須將它們添加到index.html的

Answer 1

您可以創建全局和polyfills喜歡的東西一飲而盡或的WebPack一個單獨的包，並將其納入您的index.html。例如與吞掉你可以做

let globalJs = gulp.series(
    function cleanGlobalJs() { 
     return del('dist/global*.js') 
    }, 
    function BuildGlobalJs() { 

     return gulp.src([ 
      'node_modules/core-js/client/shim.min.js', 
      'node_modules/zone.js/dist/zone.min.js' 
     ]) 
      .pipe(concat('global.js')) 
      .pipe(rev()) 
      .pipe(gulp.dest('dist')); 
    } 
); 

這是從一個角度構建我的設置採取彙總這裏https://github.com/robianmcd/hello-angular-rollup/blob/master/gulpfile.js#L125-L139

如果你真的想要一個包，你可以正好連接該軟件包從彙總的一個。

Answer 2

我用一口這樣：

gulp.task('bundle:vendor', function() { 
    return gulp 
     .src([ 
      "node_modules/core-js/client/shim.min.js", 
      "node_modules/zone.js/dist/zone.js" 
     ]) 
     .pipe(concat("vendor.bundle.js")) 
     .pipe(gulp.dest('dist')); 

}); 

Answer 3

添加rollup-plugin-node-resolve插件，你就可以捆綁住在你的node_modules文件夾包括polyfills的依賴。您可能還需要包含rollup-plugin-commonjs。