babel原理

• parse把代碼code 變成 ast
• traverse 遍歷ast 進(jìn)行修改
• generate 把a(bǔ)st變成代碼code2
• code ->> ast -->> ast2 --> code2

// 舉個(gè)??
import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import generate from "@babel/generator"
// code ->> ast -->> ast2 -->> code2
const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
//  code -->> ast
console.log(ast)  // ast 為什么表示源代碼 因?yàn)槭前言创a字符串表示成一個(gè)樹形結(jié)構(gòu)
// ast -->> ast2
// 將ast 里面所有變量聲明的let 轉(zhuǎn)換為 var 
// 如果采用正則 那么難以區(qū)分 變量聲明的let 和 值'let'  
// 在將代碼轉(zhuǎn)換為ast以后 可以遍歷ast 根據(jù) node.type 去判斷  是否為variableDeclaration （變量聲明）
traverse(ast, {
    enter: item => {
       if( item.node.type  ==  'VariableDeclaration'){
           if(item.node.kind === 'let'){
               item.node.kind = 'var'
           }
       }
    }
})
//  將最新的ast 轉(zhuǎn)換為代碼
// ast2 -->> code2
const result = generate(ast, {}, code)
console.log(result.code)

為什么要用ast

• 很難用正則表達(dá)式來替換
• 需要識別每個(gè)單詞的意思 才能做到只修改用于聲明變量的let
• 而ast可以明確的告訴你每個(gè)let 的意思

babel工具

• babel 可以把高級代碼翻譯我ES5
• @babel/parser
• @babel/traverse
• @babel/generator
• @babel/core 包含前三者
• @babel/preset-env 內(nèi)置很多規(guī)則
• 如果使用babel/core 則上面的??可以變?yōu)橄旅娴男问?/li>

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' })

const result = babel.transformFromAstSync(ast, code, {
    presets: ['@babel/preset-env']
})
console.log(result.code)

循環(huán)依賴

• 有的循環(huán)依賴可以正常執(zhí)行
• 有的循環(huán)依賴不可以
• 但都可以做靜態(tài)分析