Webpack babel 6 ES6 decoradores

Tengo un proyecto escrito en ES6 con webpack como mi bundler. La mayor parte del transpiling funciona bien, pero cuando intento incluir decoradores en cualquier lugar, obtengo este error: 

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

He revisado el rastreador de problemas de babel y no he podido encontrar nada allí, así que asumo que lo estoy usando mal. Mi configuración de webpack (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 problemas con nada más, funciones de flecha, desestructuración todo funciona bien, esto es lo único que no trabajo.

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

Author: Pavlin, 2015-11-19
Source

4 answers

Este plugin 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']
  }
}

React Native

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

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

.babelrc

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

Por favor vea esta pregunta y respuesta para una explicación completa.

 166
Author: Kyle Finley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:03:02

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

También parecería que movieron 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 la documentación actual muy pobre y carente.

 41
Author: Pavlin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-19 12:34:16

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

Tampoco estoy usando un archivo .babelrc, pero agregar esto a mi archivo karma.conf.js 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"]
    }
  },
 8
Author: reectrix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-16 09:41:42

Solo necesitas un plugin de transform decorators: http://babeljs.io/docs/plugins/transform-decorators /

 3
Author: yetone,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-07 07:43:12