Webpack babel 6 dekorator ES6


101

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.


Saya pikir karena saya memasukkan preset stage-0, mereka akan berubah dengan benar. Dekorator adalah bagian dari preset tahap-1 yang harus menyertakan dekorator transformasi. Seperti yang tertulis di website babel.
Pavlin

@Pavlin Saya berpikir apakah ini bisa menjadi masalah dengan pemesanan presets.
Sulthan

Saya pikir mungkin begitu, tetapi saya mengujinya lagi. Bagaimanapun saya mengatakannya saya mendapatkan kesalahan. Tampaknya urutannya penting, tapi saya rasa bukan itu masalahnya di sini.
Pavlin

Jawaban:


170

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.


Anda mungkin tidak ingin plugin hanya diaktifkan untuk development.
loganfsmyth

Terima kasih @loganfsmyth. Saya telah memperbarui jawaban untuk disertakan productionjuga
Kyle Finley

1
Maksud saya, mengapa harus dimasukkan ke dalam envblok? Anda dapat memiliki pluginssebagai saudara kandung daripresets
loganfsmyth

1
@ am5255, sepertinya masih bekerja untuk saya. Maukah Anda mengajukan masalah dengan penulis? github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/…
Kyle Finley

1
Akhirnya bisa mendapatkan ini bekerja. Bergantian keluar saya harus menginstal transform-class-propertiesjuga babeljs.io/docs/plugins/transform-class-properties dan juga memastikan bahwa plugin warisan adalah sebelum mengubah Plugin kelas sesuai docs di github.com/loganfsmyth/babel-plugin- transform-decorators-legacy
reectrix

41

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.


6
Dari masalah itu, plugin lama "upaya terbaik dengan batasan" dibuat. Lihat readme untuk batasan: npmjs.com/package/babel-plugin-transform-decorators-legacy
Jason

Saya dapat mengonfirmasi bahwa warisan dekorator transformasi berfungsi untuk saya sebagai solusi sementara.
dvlsg

@Pavlin, meskipun jawaban Anda mungkin benar, plugin yang tercantum di bawah ini seharusnya menjadi jawaban yang diterima untuk saat ini.
Ajax

8

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

1
Luangkan waktu satu jam di sana-sini dan hal ini berhasil bagi saya. Terima kasih banyak
cjmling

3

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


1
Masih gagal untuk saya w / itu.
amcdnl

3
@amcdnl kesan saya adalah bahwa plugin dekorator transformasi adalah yang resmi tetapi dibiarkan tidak diterapkan karena kendala TC39, sementara itu ada ini - github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
Qiming

@Qiming yup itulah yang akhirnya saya gunakan dan babel resmi bahkan mengatakan bahwa jika Anda menggali cukup jauh .. ide yang cukup buruk di pihak mereka imo
amcdnl

1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.