Каков наилучший способ включить вавилонский полифилл с использованием нескольких точек входа
Я использую конфигурацию 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
}));
});
}
]
};
есть ли способ включить Бабель полифилл в моей конфигурации weback. Или каков наилучший способ включить его в мою настройку?
должен ли я включать его в качестве требования во все мои модули?
заранее большое спасибо!
2 ответов:
самый простой способ изменить
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
запись в обоих массивах.Примечание
вышесказанное относится к Вавилону 5. Для Вавилона 6, Вы бы
npm install --save babel-polyfill
и использоватьbabel-polyfill
вместоbabel/polyfill
.
альтернативой для развития (возможно, не лучшая настройка для производства) было бы иметь
babel-polyfill
в своем собственном модуле:entry: { 'babel-polyfill': ['babel-polyfill'], main: './resources/assets/js/main.js', services: './resources/assets/js/services.js' }
Background: я попробовал предложение в ответе выше и все еще получал ошибку: "разрешен только один экземпляр babel-polyfill". Я использую webpack 2, так что, возможно, это фактор. Вышеуказанное решение отлично подходит для моих целей, так как я пишу многоразовую библиотеку, которая будет включена в более крупные приложения, и просто хочу отдельный демонстрационный пакет в библиотека РЕПО для целей тестирования. Но для полного приложения может быть не очень хорошей идеей требовать дополнительного HTTP-запроса для загрузки polyfill в производство.
Comments