Webpack babel 6 ES6装饰器

Question

我有一个用ES6编写的项目,webpack作为我的捆绑包.大多数转换工作正常,但当我尝试在任何地方包含装饰器时,我收到此错误:

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

我查看了babel问题跟踪器,并且无法在那里找到任何内容,所以我假设我使用它错了.我的webpack配置(相关位):

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

我没有任何其他问题,箭头功能,解构所有工作正常,这是唯一不起作用的东西.

我知道我可以一直降级到babel 5.8,我之前有它工作,但如果有任何方法可以在当前版本(v6.2.0)中使用它,那将有所帮助.

Answer 1

这个Babel插件为我工作:

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

要么

的WebPack

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

反应原生

随着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"]
}

请查看此问题和答案以获得完整说明.

Answer 2

在babeljs闲聊网聊上花了5分钟后,我发现当前版本的babel(v6.2)破坏了装饰器.唯一的解决方案似乎是此时降级到5.8.

它似乎也将他们的问题跟踪器从github转移到https://phabricator.babeljs.io

我把所有这些写下来,因为经过几个小时的搜索,我发现当前的文档非常差并且缺乏.

Answer 3

安装只babel-plugin-transform-decorators-legacy对我不起作用(我有一个使用酶和karma的配置).结果是安装transform-class-properties:transform-class-properties,并且根据transform-decorators-legacy中的文档确保遗留插件在转换类插件之前,最终使它对我有用.

我也没有使用.babelrc文件,但将此karma.conf.js文件添加到我的文件中对我有用:

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

我还把它添加到我的装载机中:

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