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

Цей плагін 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"],
    // ...
  ]
}

або

Вебпак

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

Реагуйте рідні

З 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: властивості-перетворення-клас, а також переконайтесь, що застарілий плагін знаходиться перед плагіном класу трансформації згідно з документами в трансформаторі-спадщині, нарешті, змусив мене працювати.

Я також не використовую .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ви користуєтесь останнім.