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

Question

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

我们运行 aot 和 rollup 来生成一个包。但我们必须始终使用 script HTML 元素将 polyfill(shim、reflect-metadata 和 zone.js)添加到 index.html。

是否可以将此填充添加到 bundle 中？

另一个问题:如何将外部 JS 库添加到 bundle 中。实际上，就像polyfills一样，我们必须将它们添加到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'));
    }
);

这取 self 在此处使用汇总设置的 Angular 构建 https://github.com/robianmcd/hello-angular-rollup/blob/master/gulpfile.js#L125-L139

如果您确实想要一个 bundle ，您可以将此 bundle 与汇总中的 bundle 连接起来。