如何使用 Rollup JS 捆绑 polyfills 和外部库？答案

【问题标题】：How bundle polyfills and external library with Rollup JS?如何使用 Rollup JS 捆绑 polyfills 和外部库？
【发布时间】：2017-03-03 21:34:17
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angular rollupjs es5-shim reflect-metadata

【解决方案1】：

您可以使用 gulp 或 webpack 为全局变量和 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

如果您真的想要一个捆绑包，您可以将此捆绑包与汇总中的捆绑包连接起来。

【讨论】：

【解决方案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'));

});

【讨论】：

【解决方案3】：

添加rollup-plugin-node-resolve 插件，您将能够捆绑存在于您的node_modules 文件夹中的任何依赖项，包括polyfills。您可能还需要包含rollup-plugin-commonjs。

【讨论】：