項目整理中，完成后補(bǔ)上Github鏈接

Typescript正廣泛成為前端工程師開發(fā)項目的首選，我手頭上有一些使用js編寫的Vue項目，最近準(zhǔn)備使用ts重寫。項目中單單是頁面的數(shù)量就超過100個，更不用提組件的數(shù)量，如果對這么多Vue文件進(jìn)行一一重寫的話，工程量浩大，并且十分枯燥。其實在此之前也手動轉(zhuǎn)換過幾個項目，發(fā)現(xiàn)轉(zhuǎn)換過程大多都是重復(fù)勞動，是有可能通過程序?qū)崿F(xiàn)自動轉(zhuǎn)換。當(dāng)然從js轉(zhuǎn)換成ts，不可避免地會出現(xiàn)類型問題，所以只要求完成重復(fù)性地工作，當(dāng)真的需要類型信息時，還是需要手動處理。

使用ts來編寫項目時，可以使用兩種不同的代碼風(fēng)格：

1. 使用Vue.extend方法實現(xiàn)。
2. 使用class語法配合vue-property-decorator實現(xiàn)。

具體應(yīng)該選擇哪種方案，見仁見智。我所采用的是方法2。為什么選擇它，如果使用方法1的話重寫起來豈不是很方便？選擇方法2是因為在Vue中大量使用this關(guān)鍵字，使用class形式更加符合直覺——所有的內(nèi)容都是在class實例上（其實可能只是我比較喜歡折騰( ′???` )。

實現(xiàn)思路

實現(xiàn)思路就和把大象裝進(jìn)冰箱一樣簡單:

1. 將舊代碼轉(zhuǎn)換成AST（Abstract Syntax Tree, 抽象語法樹）。
2. 將AST修改成class形式。（類型信息自然沒法全部填上，可以先用any或者選擇不填寫）
3. 將AST轉(zhuǎn)換成新代碼。

關(guān)于什么是抽象語法樹，可以在網(wǎng)上查找相關(guān)資料詳細(xì)了解（我覺得對于抽象語法樹有一定的了解是很有必要的）。簡單來說，js代碼可以用一個樹形結(jié)構(gòu)表示，這個樹形結(jié)構(gòu)就是抽象語法樹。例如：

function foo() {
    return a + b;
}

對應(yīng)的AST可能是下圖這樣的，一個簡單的樹形結(jié)構(gòu)（當(dāng)然這里做了很大程度的簡化，實際上要復(fù)雜地多）。

image

如果希望將代碼中的b修改為c，那么只需要修改樹中的節(jié)點就可以，例如這樣：

image

之后再用修改后的AST生成代碼就可以了。

代碼和AST的轉(zhuǎn)換

recast是一個可以方便對代碼和AST進(jìn)行轉(zhuǎn)換的庫，可以幫我們打開冰箱門和關(guān)上冰箱門。

這里必須再提到兩個概念，分別是estree和ast-types。

estree是將js代碼解析成AST的一個社區(qū)標(biāo)準(zhǔn)，也就是，最終生成的AST節(jié)點中有哪些值，目前基本上都應(yīng)該參照estree中的說明進(jìn)行實現(xiàn)。對這個標(biāo)準(zhǔn)有一些的了解，或者說對于編譯原理有一定的了解，可以提高之后修改代碼的效率。

ast-types是recast中所使用的庫，提供了語法樹節(jié)點定義、遍歷等功能。ast-types中所定義的類型兼容estree，但實際使用中，感覺有時會有一些缺失，例如在某些情況下，會存在decorators字段不存在的情況，可以通過d.ts文件對ast-types中的類型定義進(jìn)行擴(kuò)展。

如果對于編譯原理了解的不是那么清楚的話，那么也可以通過recast.parse一些代碼，來了解應(yīng)該如何寫，之后依葫蘆畫瓢編寫代碼就可以。

以下是一段代碼示例:

// 操作AST中的一些節(jié)點
import {
    builders as b,
} from 'ast-types';

const clazz = b.classDeclaration(
    b.identifier(camelCaseWithFirstLetter('MyComponent')),
    b.classBody([]),
    b.identifier('Vue')
);
clazz.decorators = [
    b.decorator(
        b.callExpression(
            b.identifier('Component'),
            [
                b.objectExpression([
                    b.property('init', b.identifier('name'), b.literal('MyComponent')),
                ],
            ],
        )
    )
];

// 上個代碼片段所對應(yīng)的代碼
@Component({
    name: 'MyComponent',
})
class MyComponent extends Vue {}

選擇parser

在recast.parse解析代碼時，會默認(rèn)使用esprima來進(jìn)行語法解析，esprima（目前為4.0.1版本）對js新語法已經(jīng)有了較多的支持，但是對于目前的項目中說，還是有部分語法無法解析。為了解決這個問題，recast也可以自定義所使用的語法解析器。

我還找到另外兩個語法解析庫，分別是@typescript-eslint/typescript-estree和@babel/parser，其中@typescript-eslint/typescript-estree對于目前vue-property-decorator中使用的修飾器語法并不支持，所以最終選擇@babel/parser。

// 使用自定義的語法解析庫
const ast = recast.parse(jsScript, {
    parser: {
        parse(source: string, options: any) {
            return parser.parse(source, Object.assign(options, {
                plugins: [
                    'estree', // 支持estree格式
                    'decorators-legacy', // 支持修飾器語法
                    // 'typescript', 支持解析typescript
                ],
                tokens: true, // 必要的參數(shù)。默認(rèn)為false，解析結(jié)果中缺少tokens內(nèi)容，當(dāng)缺少tokens時，recast將會重新使用esprima進(jìn)行解析操作
            }))
        },
    },
    tabWidth: 4,
});

對生成的代碼進(jìn)行細(xì)節(jié)調(diào)整

目前使用@vue/cli生成項目過程中，都會提示使用tslint或eslint來幫助保持代碼的整潔，如果你不是使用@vue/cli來搭建項目的話，依舊推薦在項目中加上tslint或eslint。

這些庫提供了一些代碼規(guī)范規(guī)則，例如：“所以的引號都應(yīng)該使用單引號”這樣的規(guī)范，然而使用recast.print生成的代碼中默認(rèn)使用雙引號。最終選擇還是依據(jù)項目的實際情況而定，為此recast也提供一些配置選項，使其能夠更靈活地生成代碼。

// 使用recast將AST轉(zhuǎn)換成js代碼
const code = recast.print(ast, {
    tabWidth: 4, // 使用的空格數(shù)量
    quote: 'single', // 使用單引號或者雙引號
    trailingComma: true, // 使用啟用trailingComma
}).code;

遍歷文件

在Node中使用fs來完成對于文件的遍歷

import fs from 'fs';
const dir = '/Volumes/Repo2/repo/vue/project/src';
const dist = '/Volumes/Repo2/repo/vue/project_ast/src';
const pageDir = dir + '/pages';
const queue = [ pageDir ];

while (queue.length > 0) {
    const filePath = queue.shift();
    if (filePath) {
        const stats = fs.statSync(filePath);
        const isDirectory = stats.isDirectory();
        if (isDirectory) {
            // 如果是文件夾，將所有的子路徑加入queue
            const children = fs.readdirSync(filePath);
            queue.unshift(...children.map(child => filePath + '/' + child));
        } else {
            // 如果是文件，判斷是否是.vue文件
            if (filePath.indexOf('.vue') >= 0) {
                const output = dist + filePath.substr(dir.length);
                fs.mkdirSync(path.dirname(output), {
                    recursive: true,
                    mode: 0o755,
                });
                handleVue(filePath, output); // 對于vue文件進(jìn)行處理
            }
        }
    }
}

后續(xù)內(nèi)容

目前在自己的項目上測試，雖然已經(jīng)把好多工作量自動化了，但還是好多?。ㄋ?！

還有一個我創(chuàng)建的npm組件庫large-list，之前使用class的形式來寫，應(yīng)該是因為引入了vue-property-decorator邏輯，所以最終使用rollup打包不進(jìn)行uglify情況下有27K大小。使用這個庫將class形式代碼轉(zhuǎn)換成VueOptions形式，之后再使用rollup打包同樣不進(jìn)行uglify只有4K大小，既能讓我使用class形式來編寫代碼，也讓最終發(fā)布用的代碼足夠地小。

另外既然可以完成遷移到ts語法的過程，在Vue@3正式發(fā)布之后，可能會考慮是否能將舊代碼，轉(zhuǎn)換成composition-api的格式。

image

主子（看我的眼神，不點個贊再走嗎~

修改less

在項目遷移過程中，除了對于js內(nèi)容進(jìn)行修改之外，也有對樣式文件的修改。目前項目中使用的是less，雖然less語法比較簡單，甚至可以直接使用多次正則替換來完成修改，但是誰讓我比較喜歡折騰呢。( ′???` )

雖然css代碼和js代碼差別很大，但這次仍舊通過操作AST的方式來完成修改。

依靠postcss將css轉(zhuǎn)換成AST（我覺得了解postcss也很重要呢），不過和recast不同，postcss并不會直接返回AST，需要使用postcss的插件（plguin）來完成這次修改。

下面例子中編寫了一個簡單的插件:

import postcss from 'postcss';
const code = `
    .rule {
        width: 20px;
    }
`;
const myPlugin = postcss.plugin('postcss-my-plugin', (root, result) => {
    root.walkRule((rule) => {
        rule.walkDecl((decl) => {
            console.log(decl.prop, decl.value); // 將輸出 width 和 20px
            decl.value = '40px'; // 很簡單滴就將20px修改成了40px
        });
    });
});
postcss([ myPlugin ]).process(code).then((result) => {
    /**
     * 輸出修改過的代碼
     * .rule {
     *     width: 40px;
     * }
     */
    console.log(result.css);
})

更多關(guān)于使用postcss來修改less的方法就不多寫了，有需要的童鞋可以自己研究一下。