Webpack babel 6 ES6 décorateurs
J'ai un projet écrit en ES6 avec webpack comme mon bundler. La plupart des transpilings fonctionnent bien, mais quand j'essaie d'inclure des décorateurs n'importe où, j'obtiens cette erreur:
Decorators are not supported yet in 6.x pending proposal update.
J'ai regardé le suivi des problèmes de babel, et je n'ai rien trouvé là-dessus, donc je suppose que je l'utilise mal. Ma configuration webpack (les bits pertinents):
loaders: [
{
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
test: /.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}
]
Je n'ai aucun problème avec quoi que ce soit d'autre, les fonctions de flèche, la déstructuration tout fonctionne bien, c'est la seule chose qui ne fonctionne pas travail.
Je sais que je pourrais toujours rétrograder à babel 5.8 où je l'ai fait fonctionner il y a un moment, mais s'il y a un moyen de le faire fonctionner dans la version actuelle (V6.2.0), cela aiderait.
4 réponses
Ce plugin Babel a fonctionné pour moi:
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"],
// ...
]
}
Ou
Webpack
{
test: /\.jsx?$/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-decorators-legacy' ],
presets: ['es2015', 'stage-0', 'react']
}
}
Réagir Natif
Avec react-native vous devez utiliser le plugin babel-preset-react-native-stage-0 à la place.
npm i --save babel-preset-react-native-stage-0
.babelrc
{
"presets": ["react-native-stage-0/decorator-support"]
}
, Veuillez consulter cette question et la réponse pour une explication complète.
Après avoir passé 5 minutes sur le babeljs slack webchat, j'ai découvert que les décorateurs sont cassés dans la version actuelle de babel (V6. 2). La seule solution semble être de rétrograder à 5.8 pour le moment.
Il semblerait aussi qu'ils aient déplacé leur tracker de GitHub vers https://phabricator.babeljs.io
J'écris tout cela, car après des heures de recherche, j'ai trouvé la documentation actuelle très pauvre et manquante.
L'installation uniquement de babel-plugin-transform-decorators-legacy n'a pas fonctionné pour moi (j'ai une configuration utilisant enzyme avec karma). S'avère installer transform-class-properties: transform-class-properties et en veillant également à ce que le plugin hérité soit avant le plugin de classe transform conformément aux documents de transform-decorators-legacy l'a finalement fait fonctionner pour moi.
Je n'utilise pas non plus un fichier .babelrc, mais l'ajouter à mon fichier karma.conf.js a fonctionné pour moi:
babelPreprocessor: {
options: {
presets: ['airbnb', 'es2015', 'stage-0', 'react'],
plugins: ["transform-decorators-legacy", "transform-class-properties"]
}
}
Je l'ai aussi ajouté à mes chargeurs:
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"]
}
},
Vous avez juste besoin d'un transformer les décorateurs plugin: http://babeljs.io/docs/plugins/transform-decorators/