Babel
babel 的原理
- parse: 把代碼 code 變成 AST
- traverse: 遍歷 AST 進(jìn)行修改
- generate: 把 AST 變成代碼 code2
即 code --(1)-> ast --(2)-> ast2 --(3)-> code2
demo: 將 let 變成 var
- package.json
"dependencies": {
"@babel/core": "7.12.3",
"@babel/generator": "7.12.5",
"@babel/parser": "7.12.5",
"@babel/preset-env": "7.12.1",
"@babel/traverse": "7.12.5",
"@types/babel__traverse": "7.0.15",
"ts-node": "9.0.0",
"typescript": "4.0.5"
},
"devDependencies": {
"@types/babel__core": "7.1.12",
"@types/babel__generator": "7.6.2",
"@types/babel__parser": "7.1.1",
"@types/babel__preset-env": "7.9.1",
"@types/node": "14.14.6"
}
1). 將 code 變成 ast
- let_to_var.ts
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator'
const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
console.log(ast)
在終端運(yùn)行
node -r ts-node/register --inspect-brk let_to_var.ts
打開終端的鏈接
點(diǎn)擊跳轉(zhuǎn)打開控制臺(tái)
找到我們的文件 在 console.log 那一行 打一個(gè)斷點(diǎn)
program 是我們當(dāng)前的進(jìn)程嫉入，里面有兩個(gè) Node 也就是有兩句話
第一個(gè)節(jié)點(diǎn)的類型是 VaribaleDeclarator 也就是變量聲明焰盗，kind就是變量聲明用的關(guān)鍵字璧尸，它的變量名和值都在declartions 里，id 里的 name 就是 key熬拒， init 里的value就是初始值
2). 使用 traverse 遍歷 AST 進(jìn)行修改
traverse(ast, {
enter: item => {
// 如果 type 是變量聲明
if (item.node.type === 'VariableDeclaration') {
// 如果變量聲明的類型是 let爷光，就把 let 改成 var
if (item.node.kind === 'let') {
item.node.kind = 'var'
}
}
}
})
enter 鉤子是每進(jìn)入一個(gè)節(jié)點(diǎn)時(shí)就會(huì)觸發(fā)，item 就是每個(gè)節(jié)點(diǎn)
3). 使用 generate 把 最新的 AST 變成新的代碼
const result = generate(ast, {}, code)
console.log(result.code)
運(yùn)行 node -r ts-node/register let_to_var.ts
為什么必須要用 AST
1). 你很難用正則表達(dá)式來替換澎粟，正則很容易把 let a = 'let' 變成 var a = 'var'
2). 你需要識(shí)別每個(gè)單詞的意思蛀序，才能做到只修改用于聲明變量的 let，而 AST 能明確地告訴你每個(gè) let 的意思
自動(dòng)的將代碼轉(zhuǎn)成 es5
上面我們手動(dòng)的修改了 let 變?yōu)?var活烙，那如果是 const 或者還有其他的 es6 代碼徐裸，我們又得每次手動(dòng)的在我們的代碼里添加代碼，所以我們可以使用 @babel/core 和 @babel/preset-env
import { parse } from '@babel/parser';
import * as babel from '@babel/core';
const code = `let a = 'let'; let b = 2; const c = 3`;
const ast = parse(code, { sourceType: 'module' });
// babel.transformFromAstSync 把 ast 變成新的 code
const result = babel.transformFromAstSync(ast, code, {
presets: ['@babel/preset-env']
})
console.log(result.code)
把單獨(dú)文件里的代碼轉(zhuǎn)換成 es5
我們上面代碼自動(dòng)轉(zhuǎn)換但是我們的代碼是寫在字符串里的啸盏，那么如果把我們單獨(dú)的代碼文件轉(zhuǎn)成 es5 那
- file_to_es5.ts
import { parse } from '@babel/parser';
import * as babel from '@babel/core';
import * as fs from 'fs';
const code = fs.readFileSync('./test.js').toString();
const ast = parse(code, { sourceType: 'module' });
// babel.transformFromAstSync 把 ast 變成新的 code
const result = babel.transformFromAstSync(ast, code, {
presets: ['@babel/preset-env']
})
fs.writeFileSync('./test.es5.js', result.code);
- test.js
let a = 'let'; let b = 2; const c = 3
運(yùn)行 node -r ts-node/register file_to_es5.ts
會(huì)生成一個(gè) test.es5.js 文件
分析依賴
新建一個(gè)project_1 和 deps_1.ts
project_1 下有三個(gè) js 文件
// 請(qǐng)確保你的 Node 版本大于等于 14
// 請(qǐng)先運(yùn)行 yarn 或 npm i 來安裝依賴
// 然后使用 node -r ts-node/register 文件路徑 來運(yùn)行重贺，
// 如果需要調(diào)試，可以加一個(gè)選項(xiàng) --inspect-brk宫补，再打開 Chrome 開發(fā)者工具檬姥，點(diǎn)擊 Node 圖標(biāo)即可調(diào)試
import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import { readFileSync } from 'fs'
import { resolve, relative, dirname } from 'path';
// 設(shè)置根目錄
const projectRoot = resolve(__dirname, 'project_1')
// 類型聲明
type DepRelation = { [key: string]: { deps: string[], code: string } }
// 初始化一個(gè)空的 depRelation曾我，用于收集依賴
const depRelation: DepRelation = {}
// 將入口文件的絕對(duì)路徑傳入函數(shù)粉怕，如 D:\demo\fixture_1\index.js
collectCodeAndDeps(resolve(projectRoot, 'index.js'))
console.log(depRelation)
console.log('done')
function collectCodeAndDeps(filepath: string) {
const key = getProjectPath(filepath) // 文件的項(xiàng)目路徑，如 index.js
// 獲取文件內(nèi)容抒巢，將內(nèi)容放至 depRelation
const code = readFileSync(filepath).toString()
// 初始化 depRelation[key]
depRelation[key] = { deps: [], code: code }
// 將代碼轉(zhuǎn)為 AST
const ast = parse(code, { sourceType: 'module' })
// 分析文件依賴贫贝，將內(nèi)容放至 depRelation
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
// path.node.source.value 往往是一個(gè)相對(duì)路徑，如 ./a.js蛉谜，需要先把它轉(zhuǎn)為一個(gè)絕對(duì)路徑
const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
// 然后轉(zhuǎn)為項(xiàng)目路徑
const depProjectPath = getProjectPath(depAbsolutePath)
// 把依賴寫進(jìn) depRelation
depRelation[key].deps.push(depProjectPath)
}
}
})
}
// 獲取文件相對(duì)于根目錄的相對(duì)路徑
function getProjectPath(path: string) {
return relative(projectRoot, path).replace(/\\/g, '/')
}
deps_1.ts 主要代碼思路
- 步驟
1). 調(diào)用 collectCodeAndDeps('index.js')
2). 先把 depRelation['index.js'] 初始化為 { deps: [], code: 'index.js的源碼' }
3). 然后把 index.js 源碼 code 變成 ast
4). 遍歷 ast稚晚，看看 import 了哪些依賴，假設(shè)依賴了 a.js 和 b.js
5). 把 a.js 和 b.js 寫到 depRelation['index.js'].deps 里
6). 最終得到的 depRelation 就收集了 index.js 的依賴
啟發(fā)：我們可以用哈希表來存儲(chǔ)文件依賴
用遞歸獲取嵌套依賴
三層依賴關(guān)系
index -> a -> dir/a2 -> dir/dir_in_dir/a3
index -> b -> dir/b2 -> dir/dir_in_dir/b3思路
1). collectCodeAndDeps 太長了型诚，縮寫為 collect 調(diào)用collect('index.js')
2). 發(fā)現(xiàn)依賴 './a.js' 于是調(diào)用 collect('a.js')
3). 發(fā)現(xiàn)依賴 './dir/a2.js' 于是調(diào)用 collect('dir/a2.js')
4). 發(fā)現(xiàn)依賴 './dir_in_dir/a3.js' 于是調(diào)用 collect('dir/dir_in_dir/a3.js')
5). 沒有更多依賴了客燕，a.js 這條線結(jié)束，發(fā)現(xiàn)下一個(gè)依賴 './b.js'
以此類推狰贯，其實(shí)就是遞歸deps_2.ts
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
// path.node.source.value 往往是一個(gè)相對(duì)路徑也搓，如 ./a.js，需要先把它轉(zhuǎn)為一個(gè)絕對(duì)路徑
const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
// 然后轉(zhuǎn)為項(xiàng)目路徑
const depProjectPath = getProjectPath(depAbsolutePath)
// 把依賴寫進(jìn) depRelation
depRelation[key].deps.push(depProjectPath)
+ collectCodeAndDeps(depAbsolutePath)
}
}
})
完整代碼
https://github.com/wanglifa/webpack-demo/commit/3ed790d85232fb7f2bbbaad25c8d724b73bbc878
循環(huán)依賴
node -r ts-node/register deps_3.ts
報(bào)錯(cuò)：調(diào)用棧 溢出了
為什么：分析過程 a -> b -> a -> b -> a -> b -> ... 把調(diào)用棧撐滿了
解決方法：
避免重復(fù)進(jìn)入同一個(gè)文件
- deps_4.ts
function collectCodeAndDeps(filepath: string) {
const key = getProjectPath(filepath) // 文件的項(xiàng)目路徑涵紊，如 index.js
+ if (Object.keys(depRelation).includes(key)) {
+ console.warn(`duplicated dependency: ${key}`)
+ return
+ }
...
- 思路
一旦發(fā)現(xiàn)這個(gè) key 已經(jīng)在 keys 里了傍妒，就 return
這樣分析過程就不是 a -> b -> a -> b -> ... 而是 a -> b -> return
注意我們只需要分析依賴，不需要執(zhí)行代碼摸柄，所以這樣是可行的
由于我們的分析不需要執(zhí)行代碼颤练，所以叫做靜態(tài)分析
但如果我們執(zhí)行代碼，就會(huì)發(fā)現(xiàn)還是出現(xiàn)了循環(huán)
執(zhí)行 index.js
node project_4/index.js
發(fā)現(xiàn)報(bào)錯(cuò)：不能在 'a' 初始化之前訪問 a
原因：執(zhí)行過程 a -> b -> a 此處報(bào)錯(cuò)驱负，因?yàn)?node 發(fā)現(xiàn)計(jì)算 a 的時(shí)候又要計(jì)算 a
結(jié)論
- 模塊間可以循環(huán)依賴
a 依賴 b嗦玖，b 依賴 a
a 依賴 b患雇，b 依賴 c，c 依賴 a - 但不能有邏輯漏洞
a.value = b.value + 1
b.value = a.value + 1
總結(jié)
