Javascript 代码转换器AST到JS

我正在尝试编写js代码转换器。我需要将JS解析为AST并进行一些修改，例如添加新的导入声明，然后生成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>;
  }
}

//核心
从“React”导入React，{Component，PropTypes}；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../actions/navigation”导入{actions}；
const mapStateToProps=（{navigation}）=>（{//eslint禁用线条箭头主体样式
menuStatus:navigation.get（'menuStatus'）
});
常量mapDispatchToProps=（dispatch）=>（{//eslint禁用线条箭头主体样式
操作：bindActionCreators（{…操作}，调度）
});
@连接（MapStateTrops、mapDispatchToProps）
导出默认类Home extends组件{
渲染（）{
返回(
家庭集装箱！
);
}
}

解析/生成的代码：

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

//核心
从“React”导入React，{Component，PropTypes}；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../actions/navigation”导入{actions}；
const mapStateToProps=（{navigation}）=>（{//eslint禁用线条箭头主体样式
menuStatus:navigation.get（'menuStatus'）
});
const mapDispatchToProps=dispatch=>（{//eslint禁用线条箭头主体样式
操作：bindActionCreators（{…操作}，调度）
});
导出默认@connect（mapStateToProps、mapDispatchToProps）
类Home扩展组件{
render（）{
返回
家庭集装箱！
;
}
}

这是一个巴别塔错误：

---

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

这是Babel的问题，正如我在你提交的bug中所说的：我们目前正在跟踪它