Question

这是我第一次使用Angular 2。

我们运行aot和汇总以生成捆绑包。但我们必须始终使用script HTML元素将polyfill（shim，reflect-metadata和zone.js）添加到index.html。

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

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

Answer 1

您可以使用gulp或webpack等方法为全局变量和polyfill创建单独的包，并将其包含在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：

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文件夹中包含polyfill的所有依赖项。您可能还需要包含rollup-plugin-commonjs。

如何使用Rollup JS捆绑polyfill和外部库？

3 个答案: