Acorn - 为什么箭头函数会引发解析错误？答案

【问题标题】：Acorn - why arrow function throws parsing error?Acorn - 为什么箭头函数会引发解析错误？
【发布时间】：2020-12-16 14:31:43
【问题描述】：

我正在尝试使用 Acorn 解析旧的 React 组件源代码。

要解析的组件（ProjectNew2.js）：

import React from 'react';

class ProjectNew extends React.Component {

    componentDidMount = () => {
        // do some stuff here...
    }

    render() {
        return (
            <div>fooo</div>
        );
    }

}

export default connect(mapStateToProps)(ProjectNew);

任何我的 JavaScript 代码：

#!/usr/bin/env node

const Fs = require('fs')
const acorn = require("acorn")
const jsx = require("acorn-jsx")

let fileName = "./ProjectNew2.js";
let cnt = Fs.readFileSync(fileName).toString()

let s = acorn.Parser.extend(jsx()).parse(cnt, {ecmaVersion: "latest", sourceType: "module"});

console.log(s)

和例外：

SyntaxError: Unexpected token (21:22)

问题：为什么 Acorn 在解析箭头函数时会抛出异常？

当我将解析更改为：

componentDidMount(){
    // do some stuff here...
}

Acorn 解析成功。

【问题讨论】：

标签： javascript acorn

【解决方案1】：

我相信您遇到的问题是类字段是 TC 39 之前的 stage 3 proposal 并且还不是 Javascript 语言的一部分（即使浏览器已经支持它们）。就像使用 JSX 一样，您可能需要 appropriate parser plugin 来解析它们。这几乎可以肯定与箭头函数无关，您可能会写 class Foo { x = 'x' } 并得到相同的错误。

【讨论】：

你说得对，“acorn-class-fields”插件解决了它。