Webpack + babel. Как заполифилить Nullish Coalescing (??) в бандле (не полифилится только у библиотек)?

Webpack и Babel могут использоваться совместно для полифиллинга (polyfilling) функций в вашем бандле, чтобы обеспечить поддержку старых браузеров или сред выполнения JavaScript, которые не поддерживают эти функции нативно. В вашем случае, вы хотите полифиллить оператор Nullish Coalescing (??) в вашем бандле, исключая полифилы для библиотек.

Чтобы достичь этого, вам понадобится несколько шагов:

Шаг 1: Установите необходимые зависимости
Вам понадобится установить следующие пакеты зависимостей:

npm install --save-dev @babel/preset-env core-js

@babel/preset-env: Этот пакет позволяет настраивать Babel на основе целевой среды (target environment) и применять соответствующие полифиллы.
core-js: Это пакет, который предоставляет набор полифилов для стандартных JavaScript-функций, таких как Nullish Coalescing.

Шаг 2: Настройте Babel
Вам нужно настроить Babel, чтобы он использовал @babel/preset-env и применял полифиллы для Nullish Coalescing в вашем коде. В файле .babelrc или в конфигурации Babel в вашем package.json добавьте следующую конфигурацию:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ]
  ]
}

Установленное значение "useBuiltIns": "usage" указывает Babel автоматически вносить полифилы в ваш код только для функций, которые не поддерживаются целевым окружением. "corejs": { "version": 3, "proposals": true } указывает версию core-js и включает поддержку proposal-функций, таких как Nullish Coalescing.

Шаг 3: Настройте Webpack
Чтобы Webpack включал полифиллы в ваш бандл, добавьте следующую запись в ваш файл конфигурации Webpack (обычно webpack.config.js):

module.exports = {
  entry: 'app.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

В этом примере мы используем babel-loader для обработки JavaScript-файлов и применяем @babel/preset-env в настройках Babel.

Шаг 4: Установка полифиллов
Теперь у вас все готово, чтобы использовать Nullish Coalescing (??) в вашем коде. Однако, прежде чем запустить бандл в старых браузерах или средах выполнения, вам нужно добавить импорт полифила для Nullish Coalescing в начало вашего файла entry point:

import 'core-js/features/nullish-coalescing';

core-js предоставляет полифиллы для различных функций JavaScript. Метод import сообщает Webpack, что вам нужно добавить полифиллы для Nullish Coalescing.

ВАЖНО: Обратите внимание, что импорт полифила может увеличить размер вашего бандла, поэтому рекомендуется использовать его только для целевых окружений, которые не поддерживают Nullish Coalescing нативно.

Теперь ваша конфигурация Webpack должна заполифилить Nullish Coalescing (??) в вашем бандле, исключая полифилы для библиотек.