Webpack babel 6 ES6装饰 [英] Webpack babel 6 ES6 decorators

问题描述

我已经在ES6中编写了一个用webpack作为我的捆绑软件的项目。大部分的透析效果很好，但是当我尝试在任何地方加入装饰器时，我会收到这个错误：

 装饰器不支持在6.x待处理的提案更新中。 
  

我查看了babel问题跟踪器，还没有找到任何东西在那里，所以我假设我使用错了。我的webpack配置（相关位）：

 加载程序：[
 {
 loader：'babel' ，
 exclude：/ node_modules /，
 include：path.join（__ dirname，'src'），
 test：/\.jsx?$/，
 query：{ 
 plugins：['transform-runtime']，
预设：['es2015'，'stage-0'，'react'] 
} 
} 
] 
  

我没有任何其他事情，箭头功能，破坏一切工作都很好，这是唯一的事情这不行。

我知道我可以一直降级到babel 5.8，在那里我曾经工作了一段时间，但如果有任何办法让这个工作在当前版本（v6.2.0），这将有所帮助。

解决方案

这个Babel插件为我工作：

https://github.com/loganfsmyth/巴贝尔-插件变换-DEC orator-legacy

  npm i --save-dev babel-plugin-transform-decorators-legacy 
  

.babelrc

  {
presets：[es2015，stage-0，react]，
plugins：[
 [transform-decorators-legacy 
 // ... 
] 
} 
  

或

Webpack

  {
 test：/ \。 jsx？$ /，
 loader：'babel'，
查询：{
 cacheDirectory：true，
 plugins：['transform-decorators-legacy']，
预设：['es2015'，'stage-0'，'react'] 
} 
} 
  

---

React Native

With react-native 您必须使用 babel-preset-react-native-stage-0 插件。

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

.babelrc

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

请参阅这个问题和答案，以获得完整的解释。

I've got a project written in ES6 with webpack as my bundler. Most of the transpiling works fine, but when I try to include decorators anywhere, I get this error:

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

I've looked over the babel issue tracker, and haven't been able to find anything on it there, so I'm assuming I'm using it wrong. My webpack config (the relevant bits):

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

I have no trouble with anything else, arrow functions, destructuring all work fine, this is the only thing that doesn't work.

I know I could always downgrade to babel 5.8 where I had it working a while ago, but if there's any way to get this working in the current version (v6.2.0), it would help.

解决方案

This Babel plugin worked for 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"],
    // ...
  ]
}

or

Webpack

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

---

React Native

With react-native you must use the babel-preset-react-native-stage-0 plugin instead.

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

.babelrc

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

Please see this question and answer for a complete explanation.

这篇关于Webpack babel 6 ES6装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！