Конфигурирование Babel

Дата обновления перевода 2024-07-25

Конфигурирование 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, чтобы финальный синтаксис работал в любом браузере, который вы захотите. Чтобы сконфигурировать браузеры, которые вам нужно поддерживать, см. .

После изменения вашей конфигурации "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.