Должен ли я настраивать Babel через .babelrc или WebPack?

В моем проекте реагирования webpack.config.js вводит такие свойства класса предложения:

...
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        query: {
          presets: ['@babel/react', '@babel/preset-env'],
          plugins: ['@babel/proposal-class-properties']
        }
      },
    }
...

Включив @babel/proposal-class-properties, я могу удалить конструкторы из своих компонентов React и т. д.

Однако документация показывает plugin-proposal-class-properties в .babelrc следующим образом (и вообще не упоминает webpack.config.js):

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

тогда как мой .babelrc вообще не включает никаких плагинов:

{
  "presets": [
    ["@babel/env", {
      "modules": false
    },
    "@babel/preset-env"]
  ]
}

Есть ли какая-то эффективная разница между включением плагинов (таких как proposal-class-properties) в webpack.config.js и добавлением их в .babelrc?

Нет. Все, что вы определяете в webpack под use для babel, сочетается с вашей конфигурацией babelrc. Я предпочитаю использовать babelrc для конфигурации.

Yoav Kadosh 05.06.2019 19:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
1
658
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете настроить babel через .babelrc или через конфигурацию babel-loader в webpack. Они оба работают одинаково.

Однако я рекомендую использовать только .babelrc для настройки babel. Таким образом, он также может работать, когда вы запускаете свои тесты, которые обычно не проходят через веб-пакет и, следовательно, не будут иметь конфигурацию веб-пакета для Babel.

.babelrc:

{
  "presets": ["@babel/preset-env"]
  "plugins": ['@babel/plugin-proposal-class-properties', {'loose': true}]
}

Другие вопросы по теме