項(xiàng)目整理中，完成后補(bǔ)上Github鏈接
Typescript正廣泛成為前端工程師開發(fā)項(xiàng)目的首選壶唤，我手頭上有一些使用js編寫的Vue項(xiàng)目雳灵，最近準(zhǔn)備使用ts重寫。項(xiàng)目中單單是頁面的數(shù)量就超過100個(gè)闸盔，更不用提組件的數(shù)量悯辙，如果對這么多Vue文件進(jìn)行一一重寫的話，工程量浩大，并且十分枯燥躲撰。其實(shí)在此之前也手動(dòng)轉(zhuǎn)換過幾個(gè)項(xiàng)目针贬，發(fā)現(xiàn)轉(zhuǎn)換過程大多都是重復(fù)勞動(dòng)，是有可能通過程序?qū)崿F(xiàn)自動(dòng)轉(zhuǎn)換拢蛋。當(dāng)然從js轉(zhuǎn)換成ts桦他，不可避免地會(huì)出現(xiàn)類型問題，所以只要求完成重復(fù)性地工作谆棱，當(dāng)真的需要類型信息時(shí)快压，還是需要手動(dòng)處理。
使用ts來編寫項(xiàng)目時(shí)垃瞧，可以使用兩種不同的代碼風(fēng)格：
- 使用Vue.extend方法實(shí)現(xiàn)嗓节。
- 使用class語法配合vue-property-decorator實(shí)現(xiàn)。
具體應(yīng)該選擇哪種方案皆警，見仁見智拦宣。我所采用的是方法2。為什么選擇它信姓，如果使用方法1的話重寫起來豈不是很方便鸵隧？選擇方法2是因?yàn)樵赩ue中大量使用this關(guān)鍵字，使用class形式更加符合直覺——所有的內(nèi)容都是在class實(shí)例上（其實(shí)可能只是我比較喜歡折騰( ′???` )意推。
實(shí)現(xiàn)思路
實(shí)現(xiàn)思路就和把大象裝進(jìn)冰箱一樣簡單:
- 將舊代碼轉(zhuǎn)換成AST（Abstract Syntax Tree, 抽象語法樹）豆瘫。
- 將AST修改成class形式。（類型信息自然沒法全部填上菊值，可以先用any或者選擇不填寫）
- 將AST轉(zhuǎn)換成新代碼外驱。
關(guān)于什么是抽象語法樹，可以在網(wǎng)上查找相關(guān)資料詳細(xì)了解（我覺得對于抽象語法樹有一定的了解是很有必要的）腻窒。簡單來說昵宇，js代碼可以用一個(gè)樹形結(jié)構(gòu)表示，這個(gè)樹形結(jié)構(gòu)就是抽象語法樹儿子。例如：
function foo() {
return a + b;
}
對應(yīng)的AST可能是下圖這樣的瓦哎，一個(gè)簡單的樹形結(jié)構(gòu)（當(dāng)然這里做了很大程度的簡化，實(shí)際上要復(fù)雜地多）柔逼。
如果希望將代碼中的b修改為c蒋譬，那么只需要修改樹中的節(jié)點(diǎn)就可以，例如這樣：
之后再用修改后的AST生成代碼就可以了愉适。
代碼和AST的轉(zhuǎn)換
recast是一個(gè)可以方便對代碼和AST進(jìn)行轉(zhuǎn)換的庫犯助，可以幫我們打開冰箱門和關(guān)上冰箱門。
這里必須再提到兩個(gè)概念维咸，分別是estree和ast-types剂买。
estree是將js代碼解析成AST的一個(gè)社區(qū)標(biāo)準(zhǔn)扑媚，也就是，最終生成的AST節(jié)點(diǎn)中有哪些值雷恃，目前基本上都應(yīng)該參照estree中的說明進(jìn)行實(shí)現(xiàn)疆股。對這個(gè)標(biāo)準(zhǔn)有一些的了解，或者說對于編譯原理有一定的了解倒槐，可以提高之后修改代碼的效率旬痹。
ast-types是recast中所使用的庫，提供了語法樹節(jié)點(diǎn)定義讨越、遍歷等功能两残。ast-types中所定義的類型兼容estree，但實(shí)際使用中把跨，感覺有時(shí)會(huì)有一些缺失人弓，例如在某些情況下，會(huì)存在decorators字段不存在的情況着逐，可以通過d.ts文件對ast-types中的類型定義進(jìn)行擴(kuò)展崔赌。
如果對于編譯原理了解的不是那么清楚的話，那么也可以通過recast.parse一些代碼耸别，來了解應(yīng)該如何寫健芭，之后依葫蘆畫瓢編寫代碼就可以。
以下是一段代碼示例:
// 操作AST中的一些節(jié)點(diǎn)
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')),
],
],
)
)
];
// 上個(gè)代碼片段所對應(yīng)的代碼
@Component({
name: 'MyComponent',
})
class MyComponent extends Vue {}
選擇parser
在recast.parse解析代碼時(shí)秀姐，會(huì)默認(rèn)使用esprima來進(jìn)行語法解析慈迈，esprima（目前為4.0.1版本）對js新語法已經(jīng)有了較多的支持，但是對于目前的項(xiàng)目中說省有，還是有部分語法無法解析痒留。為了解決這個(gè)問題，recast也可以自定義所使用的語法解析器蠢沿。
我還找到另外兩個(gè)語法解析庫伸头，分別是@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時(shí)，recast將會(huì)重新使用esprima進(jìn)行解析操作
}))
},
},
tabWidth: 4,
});
對生成的代碼進(jìn)行細(xì)節(jié)調(diào)整
目前使用@vue/cli生成項(xiàng)目過程中速缨，都會(huì)提示使用tslint或eslint來幫助保持代碼的整潔，如果你不是使用@vue/cli來搭建項(xiàng)目的話代乃，依舊推薦在項(xiàng)目中加上tslint或eslint旬牲。
這些庫提供了一些代碼規(guī)范規(guī)則仿粹，例如：“所以的引號都應(yīng)該使用單引號”這樣的規(guī)范，然而使用recast.print生成的代碼中默認(rèn)使用雙引號原茅。最終選擇還是依據(jù)項(xiàng)目的實(shí)際情況而定吭历，為此recast也提供一些配置選項(xiàng)，使其能夠更靈活地生成代碼擂橘。
// 使用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)容
目前在自己的項(xiàng)目上測試通贞，雖然已經(jīng)把好多工作量自動(dòng)化了朗若，但還是好多啊（摔昌罩！
還有一個(gè)我創(chuàng)建的npm組件庫large-list哭懈，之前使用class的形式來寫，應(yīng)該是因?yàn)橐肓藇ue-property-decorator邏輯茎用，所以最終使用rollup打包不進(jìn)行uglify情況下有27K大小遣总。使用這個(gè)庫將class形式代碼轉(zhuǎn)換成VueOptions形式，之后再使用rollup打包同樣不進(jìn)行uglify只有4K大小轨功，既能讓我使用class形式來編寫代碼彤避，也讓最終發(fā)布用的代碼足夠地小。
另外既然可以完成遷移到ts語法的過程夯辖，在Vue@3正式發(fā)布之后琉预，可能會(huì)考慮是否能將舊代碼，轉(zhuǎn)換成composition-api的格式蒿褂。
主子（看我的眼神圆米，不點(diǎn)個(gè)贊再走嗎~
修改less
在項(xiàng)目遷移過程中，除了對于js內(nèi)容進(jìn)行修改之外啄栓，也有對樣式文件的修改娄帖。目前項(xiàng)目中使用的是less，雖然less語法比較簡單昙楚，甚至可以直接使用多次正則替換來完成修改近速，但是誰讓我比較喜歡折騰呢。( ′???` )
雖然css代碼和js代碼差別很大堪旧，但這次仍舊通過操作AST的方式來完成修改削葱。
依靠postcss將css轉(zhuǎn)換成AST（我覺得了解postcss也很重要呢），不過和recast不同淳梦，postcss并不會(huì)直接返回AST析砸，需要使用postcss的插件（plguin）來完成這次修改。
下面例子中編寫了一個(gè)簡單的插件:
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的方法就不多寫了爆袍，有需要的童鞋可以自己研究一下首繁。
