Trình trang trí webpack babel 6 ES6

Tôi có một dự án được viết bằng ES6 với webpack làm gói của tôi. Hầu hết các chuyển đổi đều hoạt động tốt, nhưng khi tôi cố gắng đưa trình trang trí vào bất kỳ đâu, tôi gặp lỗi này:

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

Tôi đã xem qua trình theo dõi vấn đề babel và không thể tìm thấy bất kỳ thứ gì trên đó, vì vậy tôi cho rằng mình đang sử dụng sai. Cấu hình webpack của tôi (các bit có liên quan):

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

Tôi không gặp rắc rối với bất cứ thứ gì khác, các chức năng mũi tên, cấu trúc lại đều hoạt động tốt, đây là điều duy nhất không hoạt động.

Tôi biết tôi luôn có thể hạ cấp xuống babel 5.8 nơi tôi đã làm việc trước đó, nhưng nếu có bất kỳ cách nào để làm cho điều này hoạt động trong phiên bản hiện tại (v6.2.0), nó sẽ hữu ích.

Plugin Babel này phù hợp với tôi:

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

hoặc là

Webpack

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

React Native

Với react-nativebạn phải sử dụng babel-preset-react-native-stage-0plugin thay thế.

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

.babelrc

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

Vui lòng xem câu hỏi và câu trả lời này để được giải thích đầy đủ.

Sau khi dành 5 phút trên webchat của babeljs, tôi phát hiện ra rằng các trình trang trí đã bị hỏng trong phiên bản hiện tại của babel (v6.2). Giải pháp duy nhất dường như là hạ cấp xuống 5,8 tại thời điểm này.

Có vẻ như họ đã chuyển trình theo dõi vấn đề của mình từ github sang https://phabricator.babeljs.io

Tôi viết ra tất cả những điều này, vì sau hàng giờ tìm kiếm, tôi thấy tài liệu hiện tại rất nghèo nàn và thiếu thốn.

Việc cài đặt chỉ babel-plugin-transform-decorators-legacykhông hoạt động với tôi (tôi có cấu hình sử dụng enzyme cùng với karma). Hóa ra cài đặt transform-class-properties: biến đổi-class-thuộc tính và cũng đảm bảo rằng plugin kế thừa có trước plugin lớp biến đổi theo tài liệu trong biến đổi-trang trí-kế thừa cuối cùng đã làm cho nó hoạt động đối với tôi.

Tôi cũng không sử dụng .babelrctệp, nhưng việc thêm karma.conf.jstệp này vào tệp của tôi có tác dụng với tôi:

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

Tôi cũng đã thêm nó vào bộ tải của mình:

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

Bạn chỉ cần một plugin trang trí biến đổi: http://babeljs.io/docs/plugins/transform-decorators/

Nếu bạn đã nâng cấp dự án của mình từ Babel 6 lên Babel 7, thì bạn muốn cài đặt @babel/plugin-proposal-decorators .

Nếu bạn muốn hỗ trợ các trình trang trí cũ như được sử dụng trong Babel 5, bạn cần định cấu hình .babelrc như sau:

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

Đảm bảo @babel/plugin-proposal-decoratorsđi trước @babel/plugin-proposal-class-propertiestrong trường hợp bạn đang sử dụng cái sau.