Question

我试图编写js代码转换器。我需要解析JS到AST做一些修改，例如添加一个新的import声明，并生成JS代码。

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

我是这个领域的新手，所以可能在转换/生成代码时我会错过一些选项。

源代码：

// 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>
        );
    }
}

解析/生成的代码：

// 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 bug：https://github.com/babel/babel/issues/4585

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

代码转换器AST到JS

1 个答案: