babel 与 AST
先从Babel 说起
-
babel 的原理
1、parse：把代码 code 变成 AST
2、traverse：遍历 AST 进行修改
3、generate：把 AST 变成代码 code2
即：code -- (1) - > ast -- (2) - > ast2 -- (3) - > code2
示例
import { parse } from '@babel/parser'
import traverse from '@babel/traverse'
import generator from '@babel/generator'
const code = `let a = 'a'; let b = 'b'`
const ast = parse(code, { sourceType: 'module' })
console.log(ast)
运行
node -r ts-node/register --inspect-brk let_to_var.ts，用浏览器的控制台打开(--inspect-brk)，点击 node 图标开始调试
从上图的打印出的 ast 对象，我们可以很清晰的从
ast.progarm.body的第一个看出第一行代码是一个VariableDeclaration(type)，用到的关键字是let(kind)，然后对应的初始值是a(init.value)
把 let 变成 var
import { parse } from '@babel/parser'
import traverse from '@babel/traverse'
import generator from '@babel/generator'
const code = `let a = 'a'; let b = 'b'`
const ast = parse(code, { sourceType: 'module' })
traverse(ast, {
enter: item => {
if (item.node.type === 'VariableDeclaration') {
if (item.node.kind === 'let') {
item.node.kind = 'var'
}
}
}
})
const result = generator(ast, {}, code)
console.log(result.code)
使用
traverse,generator就能将 let 转换成 var
-
为什么必须要用 AST
1、你很难用正则表达式来替换，正则很容易把let a = 'a'变成var a = 'a'
2、你需要识别每个单词的意思，才能做到只修改用于变量声明的 let
3、而 AST 能明确的告诉你每个 let 的意思
将代码转为 ES5
我们可以直接使用现成的插件 @babel/core
import { parse } from '@babel/parser';
import * as babel from '@babel/core';
const code = `let a = 'let'; let b = 2; const c = 'c'`
const ast = parse(code, { sourceType: 'module' })
const result = babel.transformFromAstSync(ast, code, {
presets: ['@babel/preset-env']
})
console.log(result.code)
现在我们已经能得到转换后的es5代码了，但是我们一般都是生成单独的文件
只需要稍微改造一下，引入 fs 模块，test.js 内容依旧为let a = 'let'; let b = 2; const c = 'c'
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' })
const result = babel.transformFromAstSync(ast, code, {
presets: ['@babel/preset-env']
})
fs.writeFileSync('./test.es5.js', result.code)
代码已经移到 test.js 文件里了
运行 node -r ts-node/register file_to_es5.ts
就会得到 test.es5.js 文件
分析 index.js 的依赖
除了转换 JS 语法，还能做啥？
用来分析 JS 文件的依赖关系
创建一系列文件
// deps_1.ts
import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import { readFileSync } from 'fs'
import { resolve, relative, dirname } from 'path';
// 设置根目录
const projectRoot = resolve(__dirname, 'project_1')
// 类型声明
type DepRelation = { [key: string]: { deps: string[], code: string } }
// 初始化一个空的 depRelation，用于收集依赖
const depRelation: DepRelation = {}
// 将入口文件的绝对路径传入函数，如 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) // 文件的项目路径，如 index.js
// 获取文件内容，将内容放至 depRelation
const code = readFileSync(filepath).toString()
// 初始化 depRelation[key]
depRelation[key] = { deps: [], code: code }
// 将代码转为 AST
const ast = parse(code, { sourceType: 'module' })
// 分析文件依赖，将内容放至 depRelation
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
// path.node.source.value 往往是一个相对路径，如 ./a.js，需要先把它转为一个绝对路径
const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
// 然后转为项目路径
const depProjectPath = getProjectPath(depAbsolutePath)
// 把依赖写进 depRelation
depRelation[key].deps.push(depProjectPath)
}
}
})
}
// 获取文件相对于根目录的相对路径
function getProjectPath(path: string) {
return relative(projectRoot, path).replace(/\\/g, '/')
}
运行代码 node -r ts-node/register deps_1.ts
步骤
1.调用 collectCodeAndDeps(index.js)
2.先把 depRelation['index.js'] 初始化为 { deps: [], code: 'index.js' } （读取源代码简单，直接 fs 模块读取就好了，主要是 deps）
3.然后把 index.js 源码 code 变成 ast（只有转化为 ast 我们才知道哪些语句是 import）
4.遍历 ast，看看 import 了哪些依赖（path.node.type === 'ImportDeclaration'），假设依赖了 a.js 和 b.js
5.把 a.js 和 b.js 写到 depRelation['index'].deps 里
6.最终得到的 depRelation 就收集了 index.js 的依赖
启发：用哈希表来储存未见依赖
递归地分析嵌套依赖
升级：依赖的关系
- 三层依赖关系
1、index -> a -> dir/a2 -> dir/dir_in_dir/a3
2、index -> b -> dir/b2 -> dir/dir_in_dir/b3 - 思路
1、collectCodeAndDeps 太长了，缩写为 collect
2、调用 collect('index')
3、发现依赖 'a.js' 于是调用 collect('a.js')
4、发现依赖 './dir/a2.js' 于是调用 collect('dir/a2.js')
5、发现依赖 './dir_in_dir/s3.js' 于是调用 collect('dir/dir_in_dir/s3.js')
6、没有更多依赖了， a.js 这条线结束，发现下一个依赖 './b.js'
7、以此类推，其实就是递归
// deps_2.js // 只需要最后多加一句话
import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import { readFileSync } from 'fs'
import { resolve, relative, dirname } from 'path';
// 设置根目录
const projectRoot = resolve(__dirname, 'project_2')
// 类型声明
type DepRelation = { [key: string]: { deps: string[], code: string } }
// 初始化一个空的 depRelation，用于收集依赖
const depRelation: DepRelation = {}
// 将入口文件的绝对路径传入函数，如 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) // 文件的项目路径，如 index.js
// 获取文件内容，将内容放至 depRelation
const code = readFileSync(filepath).toString()
// 初始化 depRelation[key]
depRelation[key] = { deps: [], code: code }
// 将代码转为 AST
const ast = parse(code, { sourceType: 'module' })
// 分析文件依赖，将内容放至 depRelation
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
// path.node.source.value 往往是一个相对路径，如 ./a.js，需要先把它转为一个绝对路径
const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
// 然后转为项目路径
const depProjectPath = getProjectPath(depAbsolutePath)
// 把依赖写进 depRelation
depRelation[key].deps.push(depProjectPath)
collectCodeAndDeps(depAbsolutePath) // 其实就多了这一句话
}
}
})
}
// 获取文件相对于根目录的相对路径
function getProjectPath(path: string) {
return relative(projectRoot, path).replace(/\\/g, '/')
}
但是递归存在 call stack 溢出的风险
在复杂一点：循环依赖
- 依赖关系
1、index -> a -> b
2、index -> b -> a
- 求值
1、a.value = b.value + 1
2、b.value = a.value + 1
3、神经病.......
这样子看来 [不能循环依赖]？
但是并不是这样，只是我们当前栗子确实有问题的，我们需要一些小技巧，是的循环依赖也合法
// deps_4.js // 只需要加上一个判断
import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import { readFileSync } from 'fs'
import { resolve, relative, dirname } from 'path';
// 设置根目录
const projectRoot = resolve(__dirname, 'project_4')
// 类型声明
type DepRelation = { [key: string]: { deps: string[], code: string } }
// 初始化一个空的 depRelation，用于收集依赖
const depRelation: DepRelation = {}
// 将入口文件的绝对路径传入函数，如 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) // 文件的项目路径，如 index.js
if(Object.keys(depRelation).includes(key)){ // 只需要加上一个判断
console.warn(`duplicated dependency: ${key}`) // 注意，重复依赖不一定是循环依赖
return
}
// 获取文件内容，将内容放至 depRelation
const code = readFileSync(filepath).toString()
// 初始化 depRelation[key]
depRelation[key] = { deps: [], code: code }
// 将代码转为 AST
const ast = parse(code, { sourceType: 'module' })
// 分析文件依赖，将内容放至 depRelation
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
// path.node.source.value 往往是一个相对路径，如 ./a.js，需要先把它转为一个绝对路径
const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
// 然后转为项目路径
const depProjectPath = getProjectPath(depAbsolutePath)
// 把依赖写进 depRelation
depRelation[key].deps.push(depProjectPath)
collectCodeAndDeps(depAbsolutePath)
}
}
})
}
// 获取文件相对于根目录的相对路径
function getProjectPath(path: string) {
return relative(projectRoot, path).replace(/\\/g, '/')
}
- 避免重复进入同一个文件
- 思路：
1、一旦发现这个 key 已经在 keys 里了，就 return
2、这样分析过程就不是 a -> b -> a -> b -> ...，而是 a -> b -> return
3、注意我们只需要分析依赖，不需要执行代码，所以这样子是可行的
4、由于我们的分析不需要执行代码，所以叫做静态分析
5、但如果我们执行代码，就会发现还是出现了循环
执行发现报错：不能在 'a' 初始化之前访问 a
原因：执行过程 a-> b -> a 此处报错，因为 node 发现计算 a 的时候又要计算 a
所以，结论
- 模块间可以循环依赖
1、a 依赖 b，b 依赖 a
2、a 依赖 b，b 依赖 c，c 依赖 a - 但不能有逻辑漏洞
1、a.value = b.value + 1
2、b.value = a.value + 1 - 那能不能写出一个没有逻辑漏洞的循环依赖呢？
1、当然可以
// a.js
import b from './b.js'
const a = {
value: 'a',
getB: () => b.value + ' from a.js'
}
export default a
// b.js
import a from './a.js'
const b = {
value: 'b',
getA: () => a.value + ' from b.js'
}
export default b
// index.js
import a from './a.js'
import b from './b.js'
console.log(a.getB())
console.log(b.getA())
a.js 和 b.js 就是循环依赖，但是 a 和 b 都有初始值，所以不会循环计算
