Конфігурація 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.