jscodeshift入門簡介&程式碼重構&程式碼分析&&React

假裝做前端發表於2019-01-08
JSReact

jcodeshift是facebook出的一款圍繞recast的增強過的可以遍歷更改js 裡面ast節點 並且重新生成js程式碼的工具。 基於ast的程式碼重構工具。

它藉助於babelon來將es6 ts等程式碼轉化為ast樹結構。可以看看



import {bootstrappedFragmentContainer} from '../../bootstrapped';

bootstrappedFragmentContainer(Blah, graphql``);


複製程式碼

它對應的ast結構如圖

image

每個ast節點的定義 可以去 ast-types檢視 ，注意後面替換ast的時候經常需要去檢視這個ast節點的定義來構造對應的節點。

如下：

ast型別

ast節點檢視 可以將程式碼貼上在左邊即可。

ast檢視

先來一個小的demo

先下載jscodeshift

功能是這樣的 ：

將
function ab() {

    let ab = 90;
}

function cd() {

    let ab = 89;

}

轉化為：

function testab() {

    let ab = 90;
}

function cd() {

    let ab = 89;

}

複製程式碼

即把ab函式的名字替換為

testab
複製程式碼

，如果單純使用編輯器的替換功能肯定是達不到要求的，

那麼現在 jscodeshift 就上場了

先編寫一個transform 檔案 告訴jscodeshift 要how to do ?


export default function transformer(file, api) {
    const j = api.jscodeshift;

    const source = j(file.source)

    source
       //查詢函式表示式
        .find(j.FunctionDeclaration)
        //篩選函式名字叫ab的
        .filter(path => path.value.id.name == 'ab')
        //替換該函式節點
        .replaceWith(path => {
            //生成了一個新的函式宣告 
            //j.builder(id,[param],body)
            //具體細則可以去上面的ast-types裡面去檢視
            return j.functionDeclaration(
                    j.identifier('testab'), 
                    [], 
                    path.value.body
                )

        })
    //使用替換後的ast節點重新生成原始碼
    return source.toSource({
        quote: 'single',
    });
}

複製程式碼

現在執行命令：

jscodeshift -t ./transform.js ./demo.js --dry
複製程式碼

可以看見轉義成功了。 也可以把上面的程式碼直接拷貝到ast檢視視窗去看。

現在基本認識到了

jscodeshift
複製程式碼

的工作 類似於babel將 es6 轉義為es5的程式碼。 其實可以這樣說 jscodeshift 是babel的一個超集 。因為它還可以轉義 ts程式碼等等。

稍後我們會來分析一些常用babel外掛的轉義過程

相關文章