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

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

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

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

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

4 98
javascript webpack ecmascript-6 babeljs

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 вы должны использовать плагин.

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

.babelrc

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

смотрите вопрос-ответ для a полное объяснение.

166

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

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

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

41

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

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

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

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

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"]
    }
  },
8

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

3