Webpack babel 6 ES6 dekoratörler

Paketleyicim olarak webpack ile ES6'da yazılmış bir projem var. Transpiling çoğu iyi çalışıyor, ancak dekoratörleri herhangi bir yere dahil etmeye çalıştığımda şu hatayı alıyorum:

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

Babel sorunu izleyicisine baktım ve orada hiçbir şey bulamadım, bu yüzden yanlış kullandığımı varsayıyorum. Web paketi yapılandırmam (ilgili bitler):

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

Başka hiçbir şeyle sorunum yok, ok işlevleri, tüm işleri bozmak iyi, işe yaramayan tek şey bu.

Bir süre önce çalıştırdığım Babel 5.8'e her zaman düşürebileceğimi biliyorum, ancak bunu mevcut sürümde (v6.2.0) çalıştırmanın herhangi bir yolu varsa, yardımcı olacaktır.

Bu Babel eklentisi benim için çalıştı:

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

veya

Web paketi

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

React Native

İle react-native kullanmanız gerekir babel-preset-react-native-stage-0bunun yerine eklentisi.

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

.babelrc

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

Lütfen tam bir açıklama için bu soruya ve cevaba bakın.

Babeljs gevşek web sohbetinde 5 dakika geçirdikten sonra, babel'in şu anki sürümünde (v6.2) dekoratörlerin bozuk olduğunu öğrendim. Şu anda tek çözüm 5,8'e düşürmek gibi görünüyor.

Ayrıca sorun izleyicisini github'dan https ://phabricator.babeljs.io'ya taşıdıkları görülüyor.

Bütün bunları yazıyorum, çünkü saatlerce araştırdıktan sonra mevcut dokümantasyonu çok zayıf ve eksik buldum.

Kurulum sadece babel-plugin-transform-decorators-legacybenim için işe yaramadı (karma ile birlikte enzim kullanan bir konfigürasyonum var). Yüklemeden çıkıyor transform-class-properties: -dönüşümü sınıf özellikleri ve ayrıca docs göre sınıf eklentisi dönüşümü önce eski eklentisi ettiğinden emin dönüşümü dekoratörler-mirası nihayet benim için iş yaptı.

Ayrıca bir .babelrcdosya kullanmıyorum , ancak bunu dosyama eklemek benim karma.conf.jsiçin çalıştı:

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

Bunu yükleyicilerime de ekledim:

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

Yalnızca bir dönüşüm dekoratör eklentisine ihtiyacınız var: http://babeljs.io/docs/plugins/transform-decorators/

Projenizi Babel 6'dan Babel 7'ye yükselttiyseniz, yüklemek istersiniz @babel/plugin-proposal-decorators .

Eski dekoratörleri Babel 5'te kullanıldığı gibi desteklemek istiyorsanız .babelrc, aşağıdaki gibi yapılandırmanız gerekir :

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

İkincisini kullanmanız durumunda @babel/plugin-proposal-decoratorsönce geldiğinden emin olun @babel/plugin-proposal-class-properties.