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

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

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

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

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), это поможет.

Этот плагин 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"]
}

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

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

Также кажется, что они переместили свой трекер проблем с github на https://phabricator.babeljs.io

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

Только установка 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"]
    }
  },

Вам просто нужен плагин декораторов преобразования: http://babeljs.io/docs/plugins/transform-decorators/

Если вы обновили свой проект с 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если вы используете последнее.