javascript - org - Decoradores webpack babel 6 ES6

webpack babel react

Question

Tengo un proyecto escrito en ES6 con webpack como mi paquete. La mayor parte de la recopilación funciona bien, pero cuando trato de incluir decoradores en cualquier lugar, aparece 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 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 problemas con nada más, las funciones de flecha, la desestructuración funciona bien, esto es lo único que no funciona.

Sé que siempre podría degradar 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), sería útil.

Answer 1

Después de pasar 5 minutos en el chat web flojo 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 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 que la documentación actual es muy pobre y falta.

Answer 2

Este complemento de Babel me funcionó:

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

Paquete web

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

Reaccionar nativo

Con react-native debe usar el complemento babel-preset-react-native-stage-0 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.

Answer 3

Instalar solo babel-plugin-transform-decorators-legacy no funcionó para mí (tengo una configuración que usa enzima junto con karma). Resulta que instalas transform-class-properties : transform-class-properties y también me aseguro 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 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"]
}
},

Answer 4

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 .babelrc siguiente manera:

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

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

Answer 5

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