babel编译带有装饰器语法的代码报错

Question

我装了stage-1 也装了babel-plugin-transform-decorators-legacy ， 还装了 babel-plugin-transform-decorators 插件。

同时也在babelrc文件中定义了plugins选项第一项就是legacy这个插件。

在presets中也加入了stage-1

但是编译的时候依然会报错，说@这个符号无法parser解析

由于我是在后缀JS的文件中写的REACT代码，并没有使用JSX后缀文件。

所以我很纳闷为什么我编译的时候会报错呢？哪位童鞋知道这个原因吗？

Answer 1

提问者 小王子抓猫咪 2017-12-17 18:54:01

{
"presets": [
    //"stage-1",
    ["env", {"modules": false}],
    "react"
],
"plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "react-hot-loader/babel"
]
}

Answer 2

提问者 小王子抓猫咪 2017-12-17 18:53:11

module.exports = {    
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
},
"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
        // "airbnb"
],
"parser": "babel-eslint",
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
},
"rules": {
    "indent": [
        "error",
        2
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "double"
    ],
    "semi": [
        "error",
        "always"
    ]
}
};

Answer 3

Jokcy 2017-12-17 18:38:41

请把你的babel和webpack配置文件截图一下

• 提问者 小王子抓猫咪 #1

  我发现这样一个问题。首先我用babel-cli命令行工具编译了一份带@装饰器的JS文件。babel --plugins transform-decorators [filepath] 这样是没有报错的。于是我想到有可能是eslint检测的错误，然后我就把webpack配置文件中的eslint-loader给注释掉，发现果然这样就没有问题了。然后我发现我在babelrc文件中并没有使用"parser": "babel-eslint", 这个配置。也就是说这个值，我使用的是默认值Espree. 
  然后我再仔细看了视频发现老师你用的是 babel-eslint
  问题就出在这里。这两个有什么区别吗？

• Jokcy #2

  这两个是不同的eslint转换器，他们对于语法的处理方式不同，具体我也没有深入研究，可能使用babel parser会事先使用babel处理你的js语法再进行eslint检测，一般我们要使用babel转化我们的代码，都会用这个作为转换器

Answer 4

人生导师_毛毛 2017-12-17 09:14:15

我也遇到了这个问题，同问