Babel-preset-env не меняет размер сборки
У меня есть приложение ES6 React, которое поставляется в комплекте с webpack и использует babel. Я настраиваю babel-preset-env, для узла все работает идеально, но для браузера размер моей сборки не меняется независимо от целевого процента. Размер тот же, когда интервал> 1 или когда его 90%.
Версия webpack - 1.13.1, моя версия babel - 6.26.0, а версия babel-preset-env - 1.6.1
У меня это в моем .babelrc
{
"presets": [
"es2015",
"stage-0",
"react",
[
"env",
{
"targets": {
"node": "9.4.0",
"browsers": [
">1%"
]
}
}
]
],
"plugins": [
[
"transform-class-properties",
"transform-runtime",
"transform-decorators-legacy",
"react-intl",
{
"messagesDir": "./build/messages",
"enforceDescriptions": false
}
]
]
}
Ответы 2
Когда вы используете babel-preset-env, он примет решение, основываясь на списке целевых браузеров, включить только необходимые преобразования babel.
Это альтернатива es2015 и stage-0, и включение этих предустановок вместе с env контрпродуктивно, поскольку преобразования, включенные в эти предустановки, будут применяться независимо от того, нужны они или нет.
Это также зависит от того, как вы используете babel-polyfill. Установите его как import 'babel-polyfill' в начале вашего файла записи JavaScript, и babel-preset-env заменит импорт на индивидуальный импорт только с полифилами, необходимыми для браузеров, на которые вы нацеливаетесь.
Я не уверен, работает ли это, если вы включаете babel-polyfill как часть опции Webpack entry, например:
js
entry: {
myentry: ['babel-polyfill', 'js/index.js']
}
Надеюсь, это поможет вам уменьшить размер пакета!
P.S. Я знаю babel-preset-envдокументация не самая ясная, когда дело доходит до описания того, что вам нужно сделать.
Убедитесь, что у вас есть import "@babel/polyfill"; в вашем index.js.
Кроме того, убедитесь, что вы импортируете его только один раз. Если у вас есть что-то подобное
entry: ["@babel/polyfill", path.join(__dirname, "./src/index.js")],
в конфигурации вашего веб-пакета переместите полифилл, чтобы он выглядел как
entry: path.join(__dirname, "./src/index.js")