Webpack Babel 6 ES6装饰器

Question

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

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对我不起作用（我有一个使用酶和业力的配置）。 原来安装了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"]
    }
  },

Answer 4

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

Answer 5

如果将项目从Babel 6升级到Babel 7， @babel/plugin-proposal-decorators安装@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-decorators在@babel/plugin-proposal-class-properties之前。