javascript - org - Decoradores webpack babel 6 ES6
webpack babel react (5)
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.
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.
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.
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"]
}
},
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.
Solo necesita un complemento de decoradores de transformación: http://babeljs.io/docs/plugins/transform-decorators/