Отдельная конфигурация babel для node.js и веб-приложения внешнего интерфейса - это один и тот же проект

Question

Мне нужно Babel не только для веб-приложения (созданного с помощью Webpack), но и для утилит автоматизации nodejs, таких как gulp.В общем случае настройки babel для веб-приложения и nodejs не должны быть одинаковыми.Вопрос в том, как его отделить.

Я еще не тестировал, но, полагаю, мы могли бы определить настройки для nodejs в .babelrc и настройки для веб-приложения непосредственно в конфигурации веб-пакета, например:

module.exports = {

  // ...

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader?blacklist[]=regenerator',
            options: {
              presets: [
                ['env', {'modules': false}]
              ],
              plugins: [
                'syntax-dynamic-import',
                'transform-runtime'
              ]
            }
          },
          'eslint-loader'
        ]
      }
    ]
  }
};

Вопрос в том, какой веб-пакет конфигурации будет иметь более высокий приоритет: .babelrc или параметры загрузчика веб-пакетов (второй желательный).

Answer 1

Ответ для babel 7 (последняя версия)

Сначала убедитесь, что у вас установлено @babel/core, @babel/preset-env (следуйте инструкциям по установке babel 7).

Вместоиз. babelrc используйте .babel.config.js в корневом каталоге вашего проекта.

Поскольку babel.config.js (в отличие от package.json) - это просто файл javascript, теперь вы можете использоватьусловные.

Теперь вы можете, например, установить переменную окружения BABEL_ENV, которая будет доступна в node как свойство глобальной переменной process в process.env.BABEL_ENV (webpack также запускается в среде node).

Например, позвоните BABEL_ENV=browser npx webpack, а также позвоните BABEL_ENV=node some_other_command.Теперь вы можете получить доступ к process.env.BABEL_ENV и использовать логику, например:

babel.config.js

module.exports = function () {
    const isBrowser = process.env.BABEL_ENV === 'browser';

    const presets = ['shared_preset_1', 'shared_preset_2'];

    const plugins = ['shared_plugin_1', 'shared_plugin_2'];


    if (isBrowser) {
        plugins.push('YOUR PLUGIN');
    }

    if (!isBrowser) {
        // other logic
    }
}

Что касается Babel 6: я бы сказал, просто попробуйтеиз.Если вы поищете эту проблему, вы найдете много путаницы, потому что babel-loader, который решает, какой конфиг babel используется, никогда не документировал это.Очевидно, есть недокументированная функция: { babelrc: false }, которая отдает приоритет конфигурациям набора веб-пакетов, но если вы посмотрите на это: это очень расплывчато!