Webpack Babel 6 ES6装饰器

我有一个用Webpack作为捆绑器的用ES6编写的项目。大部分转译工作正常，但是当我尝试在任何地方包含装饰器时，都会出现此错误：

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）中运行，它将有所帮助。

这个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"]
}

请参阅此问题和答案以获取完整说明。

在babeljs松弛式网络聊天上花了5分钟之后，我发现在当前版本的babel（v6.2）中装饰器已损坏。唯一的解决方案似乎是此时降级到5.8。

看来他们也将问题追踪器从github移到了https://phabricator.babeljs.io

我把所有这些都记下来了，因为经过数小时的搜索，我发现当前的文档非常差而且缺少。

仅安装babel-plugin-transform-decorators-legacy对我不起作用（我使用了酶和业力进行配置）。结果证明transform-class-properties：安装了transform-class-properties，并确保旧插件在transform class -decorators-legacy中的文档之前在transform class插件之前最终使它对我有用。

我也没有使用.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"]
    }
  },

您只需要一个转换装饰器插件：http : //babeljs.io/docs/plugins/transform-decorators/

如果将项目从Babel 6升级到Babel 7，则要安装@babel/plugin-proposal-decorators。

如果要支持Babel 5中使用的旧版装饰器，则需要进行以下配置.babelrc：

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

如果要使用后者，请确保@babel/plugin-proposal-decorators先@babel/plugin-proposal-class-properties于后者。