Javascript Webpack babel 6 ES6 装饰器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33801311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack babel 6 ES6 decorators
提问by Pavlin
I've got a project written in ES6 with webpack as my bundler. Most of the transpiling works fine, but when I try to include decorators anywhere, I get this error:
我有一个用 ES6 编写的项目，使用 webpack 作为我的打包器。大多数转译工作正常，但是当我尝试在任何地方包含装饰器时，我收到此错误：
Decorators are not supported yet in 6.x pending proposal update.
I've looked over the babel issue tracker, and haven't been able to find anything on it there, so I'm assuming I'm using it wrong. My webpack config (the relevant bits):
我查看了 babel 问题跟踪器，但在那里找不到任何内容，所以我假设我使用错误。我的 webpack 配置（相关位）：
loaders: [
{
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}
]
I have no trouble with anything else, arrow functions, destructuring all work fine, this is the only thing that doesn't work.
我对其他任何事情都没有问题，箭头函数，解构一切正常，这是唯一不起作用的事情。
I know I could always downgrade to babel 5.8 where I had it working a while ago, but if there's any way to get this working in the current version (v6.2.0), it would help.
我知道我总是可以降级到 babel 5.8，我之前在那里工作过，但是如果有任何方法可以让它在当前版本（v6.2.0）中工作，它会有所帮助。
回答by Kyle Finley
This Babel plugin worked for me:
这个 Babel 插件对我有用：
https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
npm i --save-dev babel-plugin-transform-decorators-legacy
.babelrc
.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-nativeyou must use the babel-preset-react-native-stage-0plugin instead.
随着react-native您必须使用babel-preset-react-native-stage-0插件来代替。
npm i --save babel-preset-react-native-stage-0
.babelrc
.babelrc
{
"presets": ["react-native-stage-0/decorator-support"]
}
Please see this question and answerfor a complete explanation.
请参阅此问题和答案以获得完整的解释。
回答by Pavlin
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.
在 babeljs slack webchat 上花了 5 分钟后，我发现装饰器在当前版本的 babel (v6.2) 中被破坏了。目前唯一的解决方案似乎是降级到 5.8。
It would also seem they moved their issue tracker from github to https://phabricator.babeljs.io
他们似乎也将问题跟踪器从 github 移至https://phabricator.babeljs.io
I write all this down, since after hours of searching I have found the current documentation very poor and lacking.
我写下所有这些，因为经过数小时的搜索，我发现当前的文档非常糟糕且缺乏。
回答by reectrix
Installing only babel-plugin-transform-decorators-legacydidn'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-legacyfinally made it work for me.
仅安装babel-plugin-transform-decorators-legacy对我不起作用（我有一个使用酶和业力的配置）。原来安装transform-class-properties：transform-class-properties并确保旧插件在transform-decorators-legacy 中的文档中的转换类插件之前，最终使它对我有用。
I'm also not using a .babelrcfile, but adding this to my karma.conf.jsfile worked for me:
我也没有使用.babelrc文件，但是将它添加到我的karma.conf.js文件中对我有用：
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"]
}
},
回答by yetone
You just need a transform decorators plugin: http://babeljs.io/docs/plugins/transform-decorators/
你只需要一个变换装饰器插件：http: //babeljs.io/docs/plugins/transform-decorators/
回答by codejockie
If you upgraded your project from Babel 6 to Babel 7, then you want to install @babel/plugin-proposal-decorators.
如果您将项目从 Babel 6 升级到 Babel 7，那么您需要安装@babel/plugin-proposal-decorators.
If you want to support legacy decorators as used in Babel 5, you need to configure your .babelrcas follows:
如果你想支持 Babel 5 中使用的遗留装饰器，你需要配置你.babelrc的如下：
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
]
Ensure @babel/plugin-proposal-decoratorscomes before @babel/plugin-proposal-class-propertiesin the case that you are making use of the latter.
如果您使用后者，请确保@babel/plugin-proposal-decorators在前面@babel/plugin-proposal-class-properties。
