Webpack Babel 6 ES6 декораторов

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

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

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

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

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

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

Источник

4 ответа

Решение

Этот плагин 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, я обнаружил, что в текущей версии babel не работает декоратор (v6.2). Единственное решение, по-видимому, заключается в снижении до 5.8 в настоящее время.

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

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

Источник

Установка только babel-plugin-transform-decorators-legacy у меня не сработало (у меня есть конфигурация с использованием фермента и кармы). Оказывается установка transform-class-properties: http://babeljs.io/docs/plugins/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 в случае, если вы используете последнее.

Источник
Другие вопросы по тегам