Webpack babel 6 ES6 装饰器

Posted 2023-02-22

【中文标题】Webpack babel 6 ES6 装饰器

【英文标题】：Webpack babel 6 ES6 decorators

【发布时间】：2016-02-21 10:38:14

【问题描述】：

我有一个用 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) 中使用它，它会有所帮助。

【问题讨论】：

我认为既然我包含了 stage-0 预设，它们就会得到转换的属性。装饰器是第 1 阶段预设的一部分，应该包括变换装饰器。正如 babel 网站上所写。

@Pavlin 我在想这是否可能是presets 的排序问题。

我以为可能是这样，但我再次测试了它。无论如何，我都会得到一个错误。显然顺序确实很重要，但我认为这不是问题所在。

【参考方案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"],
    // ...
  ]

或

网页包

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

完整的解释请看question and answer。

【讨论】：

您可能不想只为development启用插件。

谢谢@loganfsmyth。我已经更新了答案以包括 production 以及

我的意思是，为什么要把它放在env 块中呢？您可以将plugins 作为presets 的兄弟姐妹

@am5255，它似乎仍然对我有用。您介意向作者提交问题吗？ github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/…

终于可以让它工作了。原来我必须安装transform-class-properties 以及babeljs.io/docs/plugins/transform-class-properties 并确保根据github.com/loganfsmyth/babel-plugin-transform-decorators-legacy中的文档，旧插件位于转换类插件之前

【参考方案2】：

在 babeljs slack 网络聊天上花了 5 分钟后，我发现装饰器在当前版本的 babel (v6.2) 中被破坏了。目前唯一的解决方案似乎是降级到 5.8。

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

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

【讨论】：

从那个问题开始，制作了一个“有限制的尽力而为”的遗留插件。有关限制，请参阅自述文件：npmjs.com/package/babel-plugin-transform-decorators-legacy

我可以确认转换装饰器的遗留对我来说是一种临时解决方案。

@Pavlin，虽然你的答案可能是正确的，但下面列出的插件应该是目前公认的答案。

【参考方案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"]
    
  ,

【讨论】：

在这里和那里花一个小时，这对我有用。非常感谢

【参考方案4】：

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

【讨论】：

对我来说仍然失败。

@amcdnl 我的印象是转换装饰器插件是官方的，但由于 TC39 的限制而未实现，同时还有这个 - github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

@Qiming 是的，这就是我最终使用的东西，babel 官方甚至说，如果你挖得够远.. imo 他们的想法很糟糕

【参考方案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 之前，以防您使用后者。