Decoradores webpack babel 6 ES6

Tengo un proyecto escrito en ES6 con webpack como paquete. La mayor parte de la transpilación funciona bien, pero cuando intento incluir decoradores en cualquier lugar, aparece este error:

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

Revisé el rastreador de problemas de babel y no pude encontrar nada allí, así que supongo que lo estoy usando mal. Mi configuración de paquete web (los bits relevantes):

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

No tengo ningún problema con nada más, las funciones de flecha, la desestructuración funcionan bien, esto es lo único que no funciona.

Sé que siempre podría cambiar a babel 5.8, donde lo tenía funcionando hace un tiempo, pero si hay alguna forma de que esto funcione en la versión actual (v6.2.0), ayudaría.

Este complemento de Babel funcionó para mí:

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

o

Webpack

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

Reaccionar nativo

Con react-nativedebe usar el babel-preset-react-native-stage-0complemento en su lugar.

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

.babelrc

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

Consulte esta pregunta y respuesta para obtener una explicación completa.

Después de pasar 5 minutos en el chat web slack de babeljs, descubrí que los decoradores no funcionan en la versión actual de babel (v6.2). La única solución parece ser rebajar a 5.8 en este momento.

También parece que han movido su rastreador de problemas de github a https://phabricator.babeljs.io

Escribo todo esto, ya que después de horas de búsqueda he encontrado que la documentación actual es muy pobre y deficiente.

La instalación solo babel-plugin-transform-decorators-legacyno funcionó para mí (tengo una configuración que usa enzima junto con karma). Resulta que instalar transform-class-properties: transform-class-properties y también asegurarse de que el complemento heredado esté antes que el complemento de la clase transform según los documentos en transform-decorators-legacy finalmente lo hizo funcionar para mí.

Tampoco estoy usando un .babelrcarchivo, pero agregar esto a mi karma.conf.jsarchivo funcionó para mí:

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

También lo agregué a mis cargadores:

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

Solo necesita un complemento de decoradores de transformación: http://babeljs.io/docs/plugins/transform-decorators/

Si actualizó su proyecto de Babel 6 a Babel 7, entonces desea instalar @babel/plugin-proposal-decorators.

Si desea admitir decoradores heredados como se usa en Babel 5, debe configurar su de la .babelrcsiguiente manera:

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

Asegúrese de que @babel/plugin-proposal-decoratorsviene antes @babel/plugin-proposal-class-propertiesen el caso de que esté utilizando este último.