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插件的转义过程