Webpack babel 6 décorateurs ES6

J'ai un projet écrit en ES6 avec webpack comme bundler. La plupart des transpilages fonctionnent bien, mais lorsque j'essaye 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é 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 fléchées, la déstructuration tout fonctionne bien, c'est la seule chose qui ne fonctionne pas.

Je sais que je pourrais toujours revenir à Babel 5.8 où je l'avais fonctionné il y a quelque temps, mais s'il y a un moyen de faire fonctionner cela dans la version actuelle (v6.2.0), cela aiderait.

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-nativevous devez utiliser le babel-preset-react-native-stage-0plugin à la place.

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

.babelrc

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

Veuillez voir cette question et réponse pour une explication complète.

Après avoir passé 5 minutes sur le webchat slack de babeljs, 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 passer à 5,8 pour le moment.

Il semblerait également qu'ils aient déplacé leur suivi des problèmes 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 babel-plugin-transform-decorators-legacyne fonctionnait pas pour moi (j'ai une configuration utilisant l'enzyme avec le karma). Il s'avère que l'installation transform-class-properties: transform-class-properties et s'assurer que le plug-in hérité est avant le plug-in de classe de transformation selon les documents dans transform-decorators-legacy a finalement fait fonctionner pour moi.

Je n'utilise pas non plus de .babelrcfichier, mais l'ajout de ceci à mon karma.conf.jsfichier a fonctionné pour moi:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

Je l'ai également 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 plugin de décorateurs de transformation: http://babeljs.io/docs/plugins/transform-decorators/

Si vous avez mis à niveau votre projet de Babel 6 vers Babel 7, vous souhaitez installer @babel/plugin-proposal-decorators.

Si vous souhaitez prendre en charge les décorateurs hérités utilisés dans Babel 5, vous devez configurer votre .babelrccomme suit:

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

Assurez-vous qu'il @babel/plugin-proposal-decoratorsvient avant @babel/plugin-proposal-class-propertiesdans le cas où vous utilisez ce dernier.