javascript - 如何使用 Rollup JS 捆绑 polyfills 和外部库？

Question

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

我们运行 aot 和 rollup 来生成一个包。但是我们必须始终将 polyfills（shim、reflect-metadata 和 zone.js）添加到带有scriptHTML 元素的 index.html 中。

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

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

Answer 1

您可以使用 gulp 或 webpack 为 globals 和 polyfills 创建一个单独的包，并将其包含在您的 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'));
    }
);

这取自我在此处使用汇总设置的角度构建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文件夹中的任何依赖项，包括 polyfills。您可能还需要包含rollup-plugin-commonjs。