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