javascript - Webpack babel 6 ES6 装饰器

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

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

对于 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以获得完整的解释。