代码转换器 AST 到 JS

Question

我正在尝试编写 js 代码转换器。我需要将 JS 解析成 AST 做一些修改，例如添加一个新的导入声明，并生成 JS 代码。

目前我在生成JS代码时遇到了一些麻烦。装饰器出现在错误的位置，生成器删除了 JSX 周围的括号。

我是这方面的新手，所以我可能在 transforming/generating 编码时遗漏了一些选项。

源代码：

// Core
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions } from '../../actions/navigation';

const mapStateToProps = ({ navigation }) => ({ // eslint-disable-line arrow-body-style
    menuStatus: navigation.get('menuStatus')
});

const mapDispatchToProps = (dispatch) => ({ // eslint-disable-line arrow-body-style
    actions: bindActionCreators({ ...actions }, dispatch)
});

@connect(mapStateToProps, mapDispatchToProps)
export default class Home extends Component {
    render () {
        return (
            <section>
                <h1>Home container!</h1>
            </section>
        );
    }
}

Parsed/generated代码：

// Core
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions } from '../../actions/navigation';

const mapStateToProps = ({ navigation }) => ({ // eslint-disable-line arrow-body-style
  menuStatus: navigation.get('menuStatus')
});

const mapDispatchToProps = dispatch => ({ // eslint-disable-line arrow-body-style
  actions: bindActionCreators({ ...actions }, dispatch)
});

export default @connect(mapStateToProps, mapDispatchToProps)
class Home extends Component {
  render() {
    return <section>
                <h1>Home container!</h1>
            </section>;
  }
}

Demo repository

Answer 1

这是一个 Babel 错误：https://github.com/babel/babel/issues/4585

如果您希望生成可以保存回文件系统的代码，您最好查看 JSCodeShift，因为它的目标是在操作代码时保留格式，而 Babel 有只对现有格式感兴趣。

代码转换器 AST 到 JS

Code transformer AST to JS

javascript

abstract-syntax-tree

reactjs

babeljs