javascript - webpack react




Webpack babel 6 décorateurs ES6 (4)

Après avoir passé 5 minutes sur le webchat 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 outil de 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 qui fait défaut.

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 de 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.


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 plug babel-preset-react-native-stage-0 in babel-preset-react-native-stage-0 .

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

.babelrc

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

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


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 }],
]

Assurez-vous que @babel/plugin-proposal-decorators figure avant @babel/plugin-proposal-class-properties si vous utilisez ce dernier.






decorator