Webpack babel 6 decoratori ES6

Ho un progetto scritto in ES6 con webpack come bundler. La maggior parte del transpiling funziona bene, ma quando provo a includere decoratori ovunque, ottengo questo errore:

Decorators are not supported yet in 6.x pending proposal update.

Ho esaminato il tracker dei problemi di babel e non sono stato in grado di trovare nulla su di esso, quindi presumo che lo stia usando in modo sbagliato. La mia configurazione del webpack (i bit rilevanti):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

Non ho problemi con nient'altro, le funzioni delle frecce, la destrutturazione funzionano bene, questa è l'unica cosa che non funziona.

So che potrei sempre eseguire il downgrade a babel 5.8 dove funzionava qualche tempo fa, ma se c'è un modo per farlo funzionare nella versione corrente (v6.2.0), sarebbe d'aiuto.

Questo plugin Babel ha funzionato per me:

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

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

React Native

Con react-nativeè invece necessario utilizzare il babel-preset-react-native-stage-0plugin.

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

.babelrc

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

Si prega di consultare questa domanda e risposta per una spiegazione completa.

Dopo aver trascorso 5 minuti sulla webchat slack di babeljs, ho scoperto che i decoratori non funzionano nella versione corrente di babel (v6.2). L'unica soluzione sembra essere il downgrade a 5.8 in questo momento.

Sembrerebbe anche che abbiano spostato il tracker dei problemi da github a https://phabricator.babeljs.io

Scrivo tutto questo, poiché dopo ore di ricerca ho trovato la documentazione attuale molto scarsa e carente.

L'installazione babel-plugin-transform-decorators-legacynon ha funzionato solo per me (ho una configurazione che utilizza l'enzima insieme al karma). Si scopre che l'installazione di transform-class-properties: transform-class-properties e anche assicurandosi che il plug-in legacy sia prima del plug-in della classe di trasformazione come da documenti in transform-decorators-legacy ha finalmente fatto funzionare per me.

Inoltre non sto usando un .babelrcfile, ma aggiungerlo al mio karma.conf.jsfile ha funzionato per me:

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

L'ho aggiunto anche ai miei caricatori:

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

Hai solo bisogno di un plugin per decoratori di trasformazione: http://babeljs.io/docs/plugins/transform-decorators/

Se hai aggiornato il tuo progetto da Babel 6 a Babel 7, allora vuoi installarlo @babel/plugin-proposal-decorators.

Se vuoi supportare i decoratori legacy come quelli usati in Babel 5, devi configurare il tuo .babelrccome segue:

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

Assicurati che @babel/plugin-proposal-decoratorsvenga prima @babel/plugin-proposal-class-propertiesnel caso in cui stai facendo uso di quest'ultimo.