使用多个入口点包含babel polyfill的最佳方法是什么 [英] What is the best way to include babel polyfill using multiple entry points

问题描述

我正在使用具有多个入口点的webpack配置:

I'm using a webpack config using multiple entry points:

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
                }));
            });
        }
    ]
};

是否可以将 babel polyfill 中包含我的webpack配置.还是将其包含在我的设置中的最佳方法是什么?

Is there any way to include the babel polyfill in my webpack config. Or what is the best way to include it in my setup?

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

Do I have to include it as a require in all my modules?

非常感谢您！

推荐答案

最简单的方法就是更改

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作为每个入口点的一部分被加载和执行，而您的文件不需要知道它.

so that the polyfill is loaded and executed as part of each entry point without your files needing to know about it.

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

This assumes that both main and services are loaded on the same page. If they are two separate pages, you'd want the babel-polyfill entry in both arrays.

以上内容适用于Babel5.对于Babel 6，您将npm install --save babel-polyfill并使用babel-polyfill而不是babel/polyfill.

The above applies to Babel 5. For Babel 6, you'd npm install --save babel-polyfill and use babel-polyfill instead of babel/polyfill.

这篇关于使用多个入口点包含babel polyfill的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！