之前一直在掘金上看到一些關於面試寫babel外掛的文章，最近也在學，以下就是學習後的總結。
關鍵詞：AST編譯解析， babel
AST編譯解析
AST[維基百科]:在電腦科學中，抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是原始碼語法結構的一種抽象表示。它以樹狀的形式表現程式語言的語法結構，樹上的每個節點都表示原始碼中的一種結構。之所以說語法是“抽象”的，是因為這裡的語法並不會表示出真實語法中出現的每個細節。比如，巢狀括號被隱含在樹的結構中，並沒有以節點的形式呈現；而類似於 if-condition-then 這樣的條件跳轉語句，可以使用帶有兩個分支的節點來表示。
和抽象語法樹相對的是具體語法樹（通常稱作分析樹）。一般的，在原始碼的翻譯和編譯過程中，語法分析器建立出分析樹。一旦AST被建立出來，在後續的處理過程中，比如語義分析階段，會新增一些資訊。
如何利用AST解析function ast(){}，更改後重新恢復
分三步走：
- 解析js的語法=>語法樹
- 遍歷樹（先序深度優先）=> 更改樹的內容
- 生成新的樹
const esprima = require('esprima');//解析js的語法的包
const estraverse = require('estraverse');//遍歷樹的包
const escodegen = require('escodegen');//生成新的樹的包
let code = `function ast(){}`;
//解析js的語法
let tree = esprima.parseScript(code);
//遍歷樹
estraverse.traverse(tree, {
enter(node) {
console.log('enter: '+node.type);
}, leave(node){
console.log('leave: '+node.type);
}
});
//生成新的樹
let r = escodegen.generate(tree);
console.log(r);
複製程式碼更改樹的內容後
const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');
let code = `function ast(){}`;
let tree = esprima.parseScript(code);
estraverse.traverse(tree, {
enter(node) {
if (node.type === 'Identifier') {
node.name = 'Jomsou';
}
// console.log('enter: '+node.type);
// }, leave(node){
// console.log('leave: '+node.type);
}
});
let r = escodegen.generate(tree);
console.log(r);
複製程式碼//結果
function Jomsou() {
}
複製程式碼babel外掛
1、ES6箭頭函式`let sum = (a, b)=>{return a+b};轉化為ES5普通函式
const babel = require('babel-core');//babel核心解析庫
const t = require('babel-types');//babel型別轉化庫
let code = `let sum = (a, b)=>{return a+b}`;
let ArrowPlugins = {
//訪問者模式
visitor: {
//捕獲匹配的API
ArrowFunctionExpression(path){
let {node} = path;
let body = node.body;
let params = node.params;
let r = t.functionExpression(null, params, body, false, false);
path.replaceWith(r);
}
}
}
let d = babel.transform(code, {
plugins: [
ArrowPlugins
]
})
console.log(d.code);
複製程式碼箭頭函式這樣寫let sum = (a, b)=>a+b;的轉化
let babel = require('babel-core');
let t = require('babel-types');
let code = `let sum = (a, b)=>a+b`;
//.babelrc
let AllowPlugins = {
visitor: {
ArrowFunctionExpression(path){
let node = path.node;
let params = node.params;
let body = node.body;
if(!t.isBlockStatement(body)){
let returnStatement = t.returnStatement(body);
body = t.blockStatement([returnStatement]);
}
let funcs = t.functionExpression(null, params, body, false, false);
path.replaceWith(funcs);
}
}
}
let r = babel.transform(code, {
plugins:[
AllowPlugins
]
})
console.log(r.code);
複製程式碼2、class
let code = `
class Jomsou{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
}
`
複製程式碼a) 實現constructor的轉化
const babel = require('babel-core');//babel核心解析庫
const t = require('babel-types');//babel型別轉化庫
/**
* function Jomsou(name){
* this.name = name;
* }
* Jomsou.prototype.getName = function(){
* return this.name;
* }
*/
let code = `
class Jomsou{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
}
`
let ClassPlugin = {
visitor: {
ClassDeclaration(path){
let {node} = path;
let className = node.id.name;
className = t.identifier(className);
//console.log(className);
let funs = t.functionDeclaration(className, [], t.blockStatement([]), false, false);
path.replaceWith(funs);
}
}
}
let d = babel.transform(code, {
plugins: [
ClassPlugin
]
})
console.log(d.code);
複製程式碼b) 實現class的方法函式轉化為原型方法
const babel = require('babel-core');//babel核心解析庫
const t = require('babel-types');//babel型別轉化庫
/**
* function Jomsou(name){
*
* }
*/
let code = `
class Jomsou{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
}
`
let ClassPlugin = {
visitor: {
ClassDeclaration(path){
let {node} = path;
let className = node.id.name;
className = t.identifier(className);
let classList = node.body.body;
//console.log(className);
let funs = t.functionDeclaration(className, [], t.blockStatement([]), false, false);
let es5func = [];
classList.forEach((item, index)=>{
let body = classList[index].body;
if(item.kind==='constructor')
{
let params = item.params.length?item.params.map(item=>item.name):[];
params = t.identifier(params);
funs = t.functionDeclaration(className, [params], body, false, false);
path.replaceWith(funs);
}else {
let protoObj = t.memberExpression(className, t.identifier('prototype'));
let left = t.memberExpression(protoObj, t.identifier(item.key.name));
let right = t.functionExpression(null, [], body, false, false);
let assign = t.assignmentExpression('=', left, right);
es5func.push(assign);
}
})
if(es5func.length==0)
{
path.replaceWith(funs);
}
else {
es5func.push(funs);
path.replaceWithMultiple(es5func);
}
}
}
}
let d = babel.transform(code, {
plugins: [
ClassPlugin
]
})
console.log(d.code);
複製程式碼3、實現模組的按需載入
eg:
//babel-plugin-固定的字首，放在node_module裡
//babel-plugin-czq-import
const babel = require('babel-core');//babel核心解析庫
const t = require('babel-types');//babel型別轉化庫
let code = `import {Button, ALert} from 'antd'`;
let importPlugin = {
visitor: {
ImportDeclaration(path){
let {node} = path;
//console.log(node);
let source = node.source.value;
let specifiers = node.specifiers;
if(!t.isImportDefaultSpecifier(specifiers[0])){
specifiers = specifiers.map(specifier=>{
return t.importDeclaration(
[t.importDefaultSpecifier(specifier.local)],
t.stringLiteral(`${source}/lib/${specifier.local.name.toLowerCase()}`)
)
});
path.replaceWithMultiple(specifiers);
}
}
}
}
let r = babel.transform(code, {
plugins: [
importPlugin
]
})
module.exports = importPlugin;
複製程式碼最後的測試
安裝依賴：
npm antd babel-preset-env babel-preset-react react react-dom webpack webpack-cli --save-dev
複製程式碼測試程式碼：
//test.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
複製程式碼測試：
npx webpack
複製程式碼用babel-plugin-czq-import前後的效果對比：
前：
後：
原文：從AST編譯解析談到寫babel外掛,歡迎star，歡迎交流。
專案地址babelPlugin
參考地址：