Webpack babel 6 ES6装饰器

我有一个项目写在 ES6与 webpack 作为我的捆绑包。大部分的翻转工作正常，但是当我试图在任何地方包含装饰器时，我得到了这个错误:

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

我看了巴别塔问题追踪器上面没有任何发现所以我猜我用错了。我的 webpack 配置(相关位) :

loaders: [
{
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}
]

我没有其他任何问题，箭头函数，解构所有工作正常，这是唯一的事情，不工作。

我知道我总是可以降级到巴贝尔5.8，在那里我已经工作了一段时间，但如果有任何方法让这个工作在当前版本(v6.2.0) ，它会有所帮助。

39094 次浏览
小开

After spending 5 minutes on the babeljs slack webchat, I found out that decorators are broken in the current version of babel (v6.2). The only solution seems to be to downgrade to 5.8 at this time.

It would also seem they moved their issue tracker from github to https://phabricator.babeljs.io

I write all this down, since after hours of searching I have found the current documentation very poor and lacking.

小开

You just need a transform decorators plugin: http://babeljs.io/docs/plugins/transform-decorators/

小开
最佳答案

This Babel plugin worked for me:

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

or

Webpack

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

React Native

With react-native you must use the babel-preset-react-native-stage-0 plugin instead.

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

.babelrc

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

Please see this question and answer for a complete explanation.

小开

Installing only babel-plugin-transform-decorators-legacy didn't work for me (I have a configuration using enzyme along with karma). Turns out installing transform-class-properties: transform-class-properties and also making sure that the legacy plugin is before the transform class plugin as per the docs in transform-decorators-legacy finally made it work for me.

I'm also not using a .babelrc file, but adding this to my karma.conf.js file worked for me: 

babelPreprocessor: {
options: {
presets: ['airbnb', 'es2015', 'stage-0', 'react'],
plugins: ["transform-decorators-legacy", "transform-class-properties"]
}
}

I also added it to my loaders: 

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

If you upgraded your project from Babel 6 to Babel 7, then you want to install @babel/plugin-proposal-decorators.

If you want to support legacy decorators as used in Babel 5, you need to configure your .babelrc as follows:

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

Ensure @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties in the case that you are making use of the latter.


提交答案