Каков наилучший способ включить babel polyfill с помощью нескольких точек входа

Я использую конфигурацию веб-пакета, используя несколько точек входа:

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

Есть ли способ включить polyfill babel в мой конфиг webpack. Или как лучше всего включить его в мои настройки?

Нужно ли включать его по мере необходимости во все мои модули?

Заранее большое спасибо!

Ответы

Ответ 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.

Ответ 2

Альтернатива для разработки (возможно, не самая лучшая настройка для производства) будет иметь babel-polyfill в своем собственном модуле:

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

Предыстория: я попробовал предложение в ответе выше и все еще получал ошибку: "Разрешен только один экземпляр babel-polyfill". Я использую Webpack 2, так что, возможно, это фактор. Приведенное выше решение подходит для моих целей, так как я пишу многократно используемую библиотеку для включения в более крупные приложения и просто хочу отдельный демонстрационный комплект в репозитории библиотеки для целей тестирования. Но для полноценного приложения, возможно, не будет хорошей идеей требовать дополнительный HTTP-запрос для загрузки polyfill в рабочей среде, если вы не используете HTTP/2.