web-dev-qa-db-fra.com

Webpack babel 6 décorateurs ES6

J'ai un projet écrit en ES6 avec Webpack en tant que liant. La plupart des transcriptions fonctionnent bien, mais lorsque 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 consulté le programme de suivi des problèmes de Babel et je n'ai rien trouvé dessus. Je suppose donc 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 autre chose, les fonctions de flèche, la déstructuration tout fonctionne bien, c'est la seule chose qui ne fonctionne pas.

Je sais que je pourrais toujours passer à babel 5.8 où je l'avais déjà utilisé il y a quelque temps, mais s'il était possible de le faire fonctionner dans la version actuelle (v6.2.0), cela aiderait.

javascriptwebpackecmascript-6babeljsdecorator
100
Pavlin

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

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

.babelrc

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

S'il vous plaît voir ceci question et réponse pour une explication complète.

170
Kyle Finley

Après avoir passé 5 minutes sur la discussion en ligne de babeljs, j'ai découvert que les décorateurs étaient en panne dans la version actuelle de babel (v6.2). La seule solution semble consister à rétrograder à 5.8 pour le moment.

Il semblerait également qu'ils aient déplacé leur gestionnaire de 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 qui fait défaut.

41
Pavlin

L'installation de seulement babel-plugin-transform-decorators-legacy N'a pas fonctionné pour moi (j'ai une configuration utilisant enzyme avec karma). Il s'avère qu’il faut installer transform-class-properties: transform-class-properties et s’assurer également que le plug-in hérité se trouve avant le plug-in de la classe Transform conformément aux docs de transform-decorators-legacy finalement fait le travail pour moi.

Je n'utilise pas non plus de 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"]
    }
  },
8
reectrix

Vous avez juste besoin d'un plugin de décorateurs de transformation: http://babeljs.io/docs/plugins/transform-decorators/

3
yetone

Si vous avez mis à niveau votre projet de Babel 6 à 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 .babelrc comme suit:

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

Assurer, garantir @babel/plugin-proposal-decorators vient avant @babel/plugin-proposal-class-properties dans le cas où vous utilisez ce dernier.

1
John Kennedy