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

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

.babelrc

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

或

的WebPack

react-native

React Native

使用babel-preset-react-native-stage-0，您必须使用npm i --save babel-preset-react-native-stage-0插件。

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

.babelrc

{{1}}

请参阅此question and answer以获取完整说明。

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

Answer 4

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

Answer 5

如果您将项目从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在sum()之前。

Webpack babel 6 ES6装饰器

5 个答案:

.babelrc

的WebPack

React Native

.babelrc