Webpack babel 6 dekorator ES6

Saya punya proyek yang ditulis dalam ES6 dengan webpack sebagai bundler saya. Sebagian besar transpiling berfungsi dengan baik, tetapi ketika saya mencoba menyertakan dekorator di mana saja, saya mendapatkan kesalahan ini:

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

Saya telah memeriksa pelacak masalah babel, dan belum dapat menemukan apa pun di sana, jadi saya berasumsi bahwa saya salah menggunakannya. Konfigurasi webpack saya (bit yang relevan):

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

Saya tidak memiliki masalah dengan hal lain, fungsi panah, merusak semua berfungsi dengan baik, ini adalah satu-satunya hal yang tidak berfungsi.

Saya tahu saya selalu bisa menurunkan versi ke babel 5.8 di mana saya sudah membuatnya berfungsi beberapa waktu lalu, tetapi jika ada cara untuk membuatnya berfungsi di versi saat ini (v6.2.0), itu akan membantu.

Plugin Babel ini berfungsi untuk saya:

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

atau

Webpack

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

React Native

Dengan react-nativeAnda harus menggunakan babel-preset-react-native-stage-0plugin sebagai gantinya.

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

.babelrc

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

Silakan lihat pertanyaan dan jawaban ini untuk penjelasan lengkap.

Setelah menghabiskan 5 menit di webchat slack babeljs, saya menemukan bahwa dekorator rusak dalam versi babel saat ini (v6.2). Satu-satunya solusi tampaknya adalah menurunkan versi ke 5,8 saat ini.

Tampaknya mereka juga memindahkan pelacak masalah mereka dari github ke https://phabricator.babeljs.io

Saya menulis semua ini, karena setelah berjam-jam mencari, saya menemukan dokumentasi saat ini sangat buruk dan kurang.

Menginstal hanya babel-plugin-transform-decorators-legacytidak berhasil untuk saya (saya memiliki konfigurasi menggunakan enzyme bersama dengan karma). Ternyata penginstalan transform-class-properties: transform-class-properties dan juga memastikan bahwa plugin legacy sebelum plugin transform class sesuai dengan dokumen di transform-decorators-legacy akhirnya berhasil untuk saya.

Saya juga tidak menggunakan .babelrcfile, tetapi menambahkan ini ke karma.conf.jsfile saya berhasil untuk saya:

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

Saya juga menambahkannya ke pemuat saya:

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

Anda hanya perlu plugin dekorator transformasi: http://babeljs.io/docs/plugins/transform-decorators/

Jika Anda meningkatkan proyek Anda dari Babel 6 ke Babel 7, maka Anda ingin memasang @babel/plugin-proposal-decorators.

Jika Anda ingin mendukung dekorator lama seperti yang digunakan di Babel 5, Anda perlu mengkonfigurasi .babelrcsebagai berikut:

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

Pastikan @babel/plugin-proposal-decoratorsdatang sebelumnya @babel/plugin-proposal-class-propertiesjika Anda menggunakan yang terakhir.