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


71

我正在使用使用多个入口点的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。或将其包括在我的设置中的最佳方法是什么?

我是否必须在所有模块中都包含它?

提前非常感谢您!

Answers:


77

最简单的方法就是改变

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两个数组中的条目。

注意

上面的内容适用于Babel5。对于Babel 6,您可以npm install --save babel-polyfill使用和babel-polyfill代替babel/polyfill


为什么使用--save-dev而不使用--save?
2014年

2
通常,您不会在生产环境中构建JS,而是在部署之前将其与开发依赖项一起编译一次,然后在生产中就不需要任何Webpack软件包。
loganfsmyth,2016年

6
如果您在同一页面上同时使用两个入口点(Uncaught Error: only one instance of babel-polyfill is allowed
Damon

4
出于好奇,如果您有一个多条目应用程序,是否需要在每个入口点都包括“ babel-polyfill”,webpack.config.js并且import babel-polyfill在每个入口点JS文件的顶部都包含?
2016年

1
对于Babel 7,在npm范围内的main: ['@babel/polyfill', './resources/assets/js/main.js']
polyfill

8

开发的替代方法(可能不是最佳的生产设置)将包含babel-polyfill在其自己的模块中:

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.