1

我正在尝试用 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：意外的令牌 (21:22)

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

当我将解析更改为：

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

Acorn 成功解析它。

4

1 回答 1

1

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

于 2020-12-16T14:40:58.647 回答