如何使用汇总JS捆绑多填充和外部库

Question

这是我使用Angular 2的第一个应用。

我们运行AOT并汇总以生成一个捆绑包。但是，我们必须始终将polyfills（shim，thim，felf-metadata and zone.js）添加到index.html，并带有 script html元素。

是否可以将此polyfills添加到捆绑包中？

另一个问题：如何在捆绑包中添加外部JS库。实际上，像polyfills一样，我们必须将它们添加到index.html

Answer 1

您可以使用诸如Gulp或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'));
    }
);

这是从在此处设置的Angular build In，此处https://github.com/robianmcd/hello-hello-angular-rollup/blob/master/master/gulpfile.js#l125-l139

如果您真的想要一个捆绑包，则可以将此捆绑包与汇总的捆绑包。

Answer 2

我以这种方式使用Gulp：

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

添加crolup-plugin节点溶解插件，您将能够捆绑在包括polyfills在内的node_modules文件夹中使用的所有依赖项。您可能还需要包括crolup-plugin-commonjs。