Webpack babel 6 decoratori ES6

Ho un progetto scritto in ES6 con webpack come mio 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 dato un’occhiata al tracker dei problemi di Babel, e non sono stato in grado di trovare nulla su di esso, quindi presumo che lo stia usando male. Il mio webpack config (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 effettuare il downgrade a Babel 5.8, dove l’ho lavorato 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'] } } 

Reagire Nativo

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

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

.babelrc

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

Si prega di vedere questa domanda e rispondere per una spiegazione completa.

Dopo aver trascorso 5 minuti sulla webchat di babeljs, ho scoperto che i decoratori sono infranti nella versione attuale di babel (v6.2). L’unica soluzione sembra essere il downgrade a 5.8 in questo momento.

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

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

Installare solo babel-plugin-transform-decorators-legacy non ha funzionato per me (ho una configurazione che utilizza l’enzima insieme al karma). Risulta l’installazione transform-class-properties transform-class : transform-class-properties e anche assicurandosi che il plug-in precedente sia prima che il plug-in della class di trasformazione come per i documenti in transform-decorators-legacy abbia finalmente funzionato per me.

Inoltre, non sto utilizzando un file .babelrc , ma l’aggiunta al mio file karma.conf.js funzionato per me:

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

L’ho anche aggiunto 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 decor transformators: http://babeljs.io/docs/plugins/transform-decorators/