如何将 polyfills 和外部库与 Rollup JS 捆绑在一起？

Question

这是我第一次申请 Angular 2.

我们运行 aot 和 rollup 以生成一个包。但是我们必须始终将 polyfill（垫片、反射元数据和 zone.js）添加到 index.html 和 script HTML 元素。

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

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

Answer 1

您可以使用 gulp 或 webpack 之类的东西为全局变量和 polyfill 创建一个单独的包，并将其包含在您的 index.html 中。例如使用 gulp 你可以做到

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 我在此处使用汇总设置的构建 https://github.com/robianmcd/hello-angular-rollup/blob/master/gulpfile.js#L125-L139

如果您真的想要一个捆绑包，您可以将这个捆绑包与来自 rollup 的捆绑包连接起来。

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 plugin, and you'll be able to bundle any dependencies that live in your node_modules folder including polyfills. You may also need to include rollup-plugin-commonjs.

如何将 polyfills 和外部库与 Rollup JS 捆绑在一起？

How bundle polyfills and external library with Rollup JS?

javascript

es5-shim

rollupjs

reflect-metadata

angular