Javascript 网页包babel 6 ES6装饰器

我有一个用ES6编写的项目，webpack是我的捆绑包。大多数传输工作正常，但当我尝试在任何地方包含装饰器时，会出现以下错误：

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

我已经查看了babel问题跟踪器，但在那里找不到任何东西，所以我认为我用错了。我的网页包配置（相关位）：

我在其他方面没有问题，箭头函数，解构都很好，这是唯一不起作用的

---

我知道我总是可以降级到babel 5.8，而我之前就让它在那里工作过，但是如果有任何方法可以让它在当前版本（v6.2.0）中工作，它会有所帮助。

在babeljs slack webchat上花了5分钟之后，我发现在当前版本的babel（v6.2）中，装饰程序被破坏了。目前唯一的解决办法似乎是降级到5.8

他们似乎也将问题跟踪者从github转移到了

---

我把这些都写了下来，因为经过几个小时的搜索，我发现当前的文档非常糟糕和缺乏。

你只需要一个transform decorators插件：

这个巴别塔插件对我有用：

B.法律改革委员会 或

网页包

---

自然反应 使用

react native

时，必须使用

babel-preset-react-native-stage-0

插件

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

B.法律改革委员会

---

请参阅本文以获得完整的解释。

仅安装

babel插件转换装饰器遗留版

对我不起作用（我有一个使用酶和karma的配置）。结果是安装了

转换类属性

：并且根据中的文档确保旧插件在转换类插件之前，最终使它对我起作用

我也没有使用

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

---

如果您将项目从Babel 6升级到Babel 7，那么您需要安装

@Babel/plugin Proposition decorators

如果要支持Babel 5中使用的旧式装饰器，则需要按如下方式配置

.babelrc

：

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

---

确保

@babel/plugin提案装饰程序
位于
@babel/plugin提案类属性之前，以防您使用后者。
我认为，由于我包含了stage-0预设，它们将得到转换属性。装饰器是阶段1预设的一部分，应该包括变换装饰器。正如babel网站上所写的。@Pavlin我在想这是否是
预设的排序问题。我想可能是这样，但我再次测试了它。不管我怎么说，我都会出错。显然顺序很重要，但我不认为这是问题所在。从这个问题出发，我们开发了一个“有限制的尽力而为”的遗留插件。有关限制，请参阅自述文件：我可以确认transform decorators legacy作为临时解决方案对我有效。@Pavlin，尽管您的回答可能是正确的，下面列出的插件应该是目前可以接受的答案。对于我来说仍然失败。@amcdnl我的印象是transform decorators插件是官方插件，但由于TC39限制而没有实现，同时还有一个-@Qiming-yup，这就是我最终使用的，巴贝尔的官员甚至说，如果你挖得足够远。。他们的想法非常糟糕，你可能不希望插件只在
开发时启用。谢谢@loganfsmyth。我已经将答案更新为包含
production
，我的意思是，为什么要把它放在
env
块中呢？您可以将
插件作为
预设
@am5255的兄弟，它似乎仍然适合我。你介意向作者提交一个问题吗？终于能够让这一切顺利进行了。事实证明，我还必须安装
转换类属性
，并确保旧插件在转换类插件之前，按照文档中的说明，在这里和那里花一个小时，这对我来说很有用。非常感谢
npm i --save babel-preset-react-native-stage-0

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

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

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