Webpack babel 6 Декораторы ES6

У меня есть проект, написанный на ES6 с веб-пакетом в качестве моего поставщика. Большинство транспилингов прекрасно работают, но когда я пытаюсь включить декораторы в любом месте, я получаю эту ошибку:

Decorators are not supported yet in 6.x pending proposal update.

Я просмотрел трекер babel и не смог найти что-либо там, поэтому я предполагаю, что использую его неправильно. Моя конфигурация webpack (соответствующие биты):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

У меня нет проблем с чем-либо еще, функциями стрелок, деструктурированием, все работает нормально, это единственное, что не работает.

Я знаю, что всегда мог бы понизиться до babel 5.8, где у меня это работало некоторое время назад, но если есть способ заставить это работать в текущей версии (v6.2.0), это поможет.

Ответы

Ответ 1

Этот плагин Babel работал у меня:

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

npm i --save-dev babel-plugin-transform-decorators-legacy

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

или

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

React Native

С react-native вместо этого вы должны использовать плагин babel-preset-react-native-stage-0.

npm i --save babel-preset-react-native-stage-0

.babelrc

{
  "presets": ["react-native-stage-0/decorator-support"]
}

Пожалуйста, ознакомьтесь с этим вопросом и ответом для полного объяснения.

Ответ 2

Проведя 5 минут на слабом веб-сайте babeljs, я узнал, что декораторы разбиты в текущей версии babel (v6.2). Единственное решение, похоже, сейчас понизить до 5.8.

Казалось бы, они переместили свой трекер ошибок из github в https://phabricator.babeljs.io

Я пишу все это, так как после нескольких часов поиска я нашел текущую документацию очень бедной и отсутствующей.

Ответ 3

Установка только babel-plugin-transform-decorators-legacy для меня не сработала (у меня есть конфигурация с использованием энзима и кармы). Оказывается, установив transform-class-properties: transform-class-properties, а также убедившись, что унаследованный плагин находится перед плагином класса преобразования, в соответствии с документами в transform-decorators-legacy наконец-то заставил его работать для меня.

Я также не использую файл .babelrc, но добавление этого в мой файл karma.conf.js сработало для меня:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

Я также добавил это к моим загрузчикам:

loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, 'node_modules'),
    query: {
      presets: ['airbnb', 'es2015', 'stage-0', 'react'],
      plugins: ["transform-decorators-legacy", "transform-class-properties"]
    }
  },

Ответ 5

Если вы обновили свой проект с Babel 6 до Babel 7, то вы хотите установить @babel/plugin-proposal-decorators.

Если вы хотите поддерживать устаревшие декораторы, используемые в Babel 5, вам необходимо настроить ваш .babelrc следующим образом:

plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
]

Убедитесь, что @babel/plugin-proposal-decorators предшествует @babel/plugin-proposal-class-properties в том случае, если вы используете последний.