代碼轉換器AST到JS

Question

我想寫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>; 
    } 
} 

Demo repository

Answer 1

是Babel錯誤：https://github.com/babel/babel/issues/4585

如果您希望生成可以保存迴文件系統的代碼，您最好查看JSCodeShift，因爲它的目標是在操作代碼時保留格式，而Babel只對現有格式有興趣。