使用多个入口点包含 babel polyfill 的最佳方法是什么答案

【问题标题】：What is the best way to include babel polyfill using multiple entry points使用多个入口点包含 babel polyfill 的最佳方法是什么
【发布时间】：2015-10-27 23:05:39
【问题描述】：

我正在使用带有多个入口点的 webpack 配置：

var fs = require('fs');
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js');

module.exports = {
    cache: true,
    entry: {
        main: './resources/assets/js/main.js',
        services: './resources/assets/js/services.js'
    },
    output: {
        path: './public/assets/web/js',
        filename: '[name].[hash].js',
        publicPath: '/assets/web/js/',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'web_modules', 'modules']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: [/node_modules/, /web_modules/],
            loader: 'babel-loader',
            query: {
                stage: 0
            }
        }]
    },
    plugins: [commonsPlugin,
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery'
        }),
        function() {
            this.plugin('done', function(stats) {
                fs.writeFile('./cache.json', JSON.stringify({
                    hash: stats.hash
                }));
            });
        }
    ]
};

有没有办法在我的 webpack 配置中包含 babel polyfill。或者将它包含在我的设置中的最佳方式是什么？

我是否必须将它作为要求包含在我的所有模块中？

非常感谢您！

【问题讨论】：

标签： webpack babeljs

【解决方案1】：

最简单的方法是改变

main: './resources/assets/js/main.js',
services: './resources/assets/js/services.js'

成为

main: ['babel-polyfill', './resources/assets/js/main.js'],
services: ['./resources/assets/js/services.js']

这样 polyfill 作为每个入口点的一部分被加载和执行，而您的文件不需要知道它。

这假设main 和services 都加载在同一页面上。如果它们是两个单独的页面，您需要在两个数组中都有 babel-polyfill 条目。

注意

以上内容适用于 Babel 5。对于 Babel 6，您应该使用 npm install --save babel-polyfill 并使用 babel-polyfill 而不是 babel/polyfill。

【讨论】：

你为什么使用--save-dev而不是--save？
通常你不会在生产环境中构建你的 JS，你会在部署之前用你的开发依赖编译一次，然后在生产中你不需要任何 webpack 包。
如果您在同一页面上使用两个入口点（Uncaught Error: only one instance of babel-polyfill is allowed），这将失败
出于好奇，如果您有一个多入口应用程序，您是否必须在 webpack.config.js 中为每个入口点包含“babel-polyfill”并在每个入口点 JS 文件的顶部？
对于 Babel 7，npm 范围的 polyfill 入口路径将是 main: ['@babel/polyfill', './resources/assets/js/main.js']

【解决方案2】：

开发的替代方案（也许不是生产的最佳设置）是在自己的模块中包含babel-polyfill：

entry: {
    'babel-polyfill': ['babel-polyfill'],
    main: './resources/assets/js/main.js',
    services: './resources/assets/js/services.js'
}

背景：我尝试了上面答案中的建议，但仍然出现错误：“只允许一个 babel-polyfill 实例”。我正在使用 webpack 2，所以也许这是一个因素。上面的解决方案对我的目的来说很好，因为我正在编写一个可重用的库以包含在更大的应用程序中，并且只希望在库 repo 中有一个单独的演示包用于测试目的。但是对于一个完整的应用程序，除非您使用的是 HTTP/2，否则需要额外的 HTTP 请求来加载生产中的 polyfill 可能不是一个好主意。

【讨论】：