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

jcodeshift是facebook出的一款圍繞recast的加強過的能夠遍歷更改js 裏面ast節點 而且從新生成js代碼的工具。 基於ast的代碼重構工具。

它藉助於babelon來將es6 ts等代碼轉化爲ast樹結構。能夠看看

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

bootstrappedFragmentContainer(Blah, graphql``);


複製代碼

它對應的ast結構如圖

每一個ast節點的定義 能夠去 ast-types查看 ，注意後面替換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插件的轉義過程