Decoradores Webpack babel 6 ES6

Eu tenho um projeto escrito em ES6 com webpack como meu bundler. A maior parte da tradução funciona bem, mas quando tento incluir decoradores em qualquer lugar, recebo este erro:

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

Eu olhei o rastreador de problemas do babel e não consegui encontrar nada nele, então presumo que esteja usando errado. Minha configuração do webpack (os bits relevantes):

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

Não tenho problemas com mais nada, funções de seta, desestruturação tudo funciona bem, isso é a única coisa que não funciona.

Sei que sempre posso fazer o downgrade para o babel 5.8, onde estava funcionando há um tempo, mas se houver alguma maneira de fazer isso funcionar na versão atual (v6.2.0), isso ajudaria.

Este plugin do Babel funcionou para mim:

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

ou

Webpack

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

React Native

Com react-nativevocê deve usar o babel-preset-react-native-stage-0plugin.

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

.babelrc

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

Por favor, veja esta pergunta e resposta para uma explicação completa.

Depois de passar 5 minutos no webchat do slack do babeljs, descobri que os decoradores estão corrompidos na versão atual do babel (v6.2). A única solução parece ser fazer o downgrade para 5.8 neste momento.

Também parece que eles moveram o rastreador de problemas do github para https://phabricator.babeljs.io

Escrevo tudo isso, pois depois de horas de pesquisa, descobri que a documentação atual é muito pobre e insuficiente.

Instalar apenas babel-plugin-transform-decorators-legacynão funcionou para mim (eu tenho uma configuração usando enzima junto com karma). Acontece que a instalação de transform-class-properties: transform-class-properties e também certificando-se de que o plug-in legado está antes do plug-in de classe transform de acordo com os documentos em transform-decorators-legacy finalmente fez com que funcionasse para mim.

Também não estou usando um .babelrcarquivo, mas adicionar isso ao meu karma.conf.jsarquivo funcionou para mim:

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

Eu também adicionei aos meus carregadores:

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

Você só precisa de um plugin de decoradores de transformação: http://babeljs.io/docs/plugins/transform-decorators/

Se você atualizou seu projeto do Babel 6 para o Babel 7, você deseja instalar @babel/plugin-proposal-decorators.

Se você deseja oferecer suporte a decoradores legados como usados ​​no Babel 5, você precisa configurar seu da .babelrcseguinte forma:

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

Certifique-se de @babel/plugin-proposal-decoratorsvir antes, se @babel/plugin-proposal-class-propertiesvocê estiver usando o último.