Decoradores webpack babel 6 ES6


101

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.


Pensé que desde que incluí el ajuste preestablecido de etapa 0, se transformarían correctamente. Los decoradores son parte del ajuste preestablecido de la etapa 1 que debe incluir los decoradores de transformación. Como está escrito en el sitio web de babel.
Pavlin

@Pavlin Estoy pensando si esto podría ser un problema con el pedido de presets.
Sulthan

Pensé que podría ser eso, pero lo probé de nuevo. De cualquier forma que lo diga, aparece un error. Aparentemente, el orden importa, pero no creo que ese sea el problema aquí.
Pavlin

Respuestas:


170

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.


Probablemente no desee que el complemento esté habilitado solo para development.
loganfsmyth

Gracias @loganfsmyth. Actualicé la respuesta para incluir productiontambién
Kyle Finley

1
Quiero decir, ¿por qué ponerlo en un envbloque? Puedes tener pluginscomo hermano depresets
loganfsmyth

1
@ am5255, todavía parece funcionar para mí. ¿Le importaría enviar un problema con el autor? github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/…
Kyle Finley

1
Finalmente pude hacer que esto funcionara. Resulta que tenían que instalar transform-class-properties, así babeljs.io/docs/plugins/transform-class-properties y también asegurarse de que el plugin legado es antes de que el plug-in de clase transformar según los documentos en github.com/loganfsmyth/babel-plugin- transform-decorators-legacy
reectrix

41

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.


6
A partir de ese problema, se realizó un complemento heredado de "mejor esfuerzo con limitaciones". Consulte el archivo
Jason

Puedo confirmar que el legado de los decoradores de transformación funciona para mí como una solución provisional.
dvlsg

@Pavlin, aunque su respuesta puede haber sido correcta, el complemento que se enumera a continuación debería ser la respuesta aceptada por ahora.
Ajax

8

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

1
Pasé una hora aquí y allá y esto funcionó para mí. Muchas gracias
cjmling

3

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


1
Todavía me falló con eso.
amcdnl

3
@amcdnl mi impresión es que el complemento de los decoradores de transformación es el oficial, pero no se implementó debido a las restricciones de TC39, mientras tanto existe esto: github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
Qiming

@Qiming sí, eso es lo que terminé usando y el funcionario de babel incluso dice que si cavas lo suficiente ... una idea bastante terrible de su parte
mi opinión

1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.