Конфігурація Babel
Дата оновлення перекладу 2024-05-27
Конфігурація Babel
Babel автоматично конфігурується для всіх файлів .js
та .jsx
через
babel-loader
з розумними значеннями за замовчуванням (наприклад, з
@babel/preset-env
і @babel/preset-react
, за запитом).
Вам потрібно ще більше розширити конфігурацію Babel? Найлегший спосіб зробити це -
через configureBabel()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// webpack.config.js
// ...
Encore
// ...
.configureBabel(function(babelConfig) {
// додати додаткові пресети
babelConfig.presets.push('@babel/preset-flow');
// за замовчуванням плагіни не додаються, але ви можете їх додати
babelConfig.plugins.push('styled-jsx/babel');
}, {
// node_modules не обробляється через Babel за замовчуванням,
// але ви можете дозволити обробку якихось конкретних модулів
includeNodeModules: ['foundation-sites'],
// або повністю контролювати правило виключення (відмітьте, що ви не можете
// використовувати "includeNodeModules" та "exclude" водночас)
exclude: /bower_components/
})
;
Конфігурація цілей браузера
Пресет @babel/preset-env
переписує ваш JavaScript, щоб фінальний синтаксис працював
у будь-якому браузері, який ви захочете. Щоб сконфігурувати браузери, які вам потрібно
підтримувати, див. PostCSS та автоматичне додавання префіксів (postcss-loader).
Після зміни вашої конфігурації "browserslist", вам знадобиться вручну видалити каталог кеша babel:
1 2
# В Unix запустіть цю команду. В Windows, очистіть цей каталог вручну
$ rm -rf node_modules/.cache/babel-loader/
Якщо ви хочете налаштувати конфігурацію preset-env
, скористайтеся методом configureBabelPresetEnv()
щоб додати будь-яку з опцій конфігурації @babel/preset-env:
1 2 3 4 5 6 7 8 9 10 11
// webpack.config.js
// ...
Encore
// ...
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
;
Створення файлу .babelrc
Замість того, щоб викликати configureBabel()
, ви можете створити файл .babelrc
в корені вашого проекту. Це "стандартніший" спосіб конфігурації Babel, але у нього є
недоліки: як тільки зʼявляється файл .babelrc
, Encore більше не може доодавати
ніяку конфігурацію Babel для вас. Наприклад, якщо ви викличете Encore.enableReactPreset()
,
попередня установка react
не буде автоматично додана у Babel: ви повинні будете
додати її самі у .babelrc
.
Як тільки файл .babelrc
існуватиме, він буде головувати над конфігурацією
Babel, доданої Encore.