珠峰架构师成长计划

1.抽象语法树(Abstract Syntax Tree) #

webpack和Lint等很多的工具和库的核心都是通过Abstract Syntax Tree抽象语法树这个概念来实现对代码的检查、分析等操作的

2.抽象语法树用途 #

代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
- 如 JSLint、JSHint 对代码错误或风格的检查，发现一些潜在的错误
- IDE 的错误提示、格式化、高亮、自动补全等等
代码混淆压缩
- UglifyJS2 等
优化变更代码，改变代码结构使达到想要的结构
- 代码打包工具 webpack、rollup 等等
- CommonJS、AMD、CMD、UMD 等代码规范之间的转化
- CoffeeScript、TypeScript、JSX 等转化为原生 Javascript

3.抽象语法树定义 #

这些工具的原理都是通过JavaScript Parser把代码转化为一颗抽象语法树（AST），这颗树定义了代码的结构，通过操纵这颗树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作

ast

4. JavaScript Parser #

JavaScript Parser是把JavaScript源码转化为抽象语法树的解析器。
浏览器会把JavaScript源码通过解析器转为抽象语法树,再进一步转化为字节码或直接生成机器码。
一般来说每个JavaScript引擎都会有自己的抽象语法树格式，Chrome 的 v8 引擎，firefox 的 SpiderMonkey 引擎等等，MDN 提供了详细SpiderMonkey AST format 的详细说明，算是业界的标准。

4.1 常用的 JavaScript Parser #

esprima
traceur
acorn
shift

4.2 遍历 #

cnpm i esprima estraverse- S

let esprima = require('esprima');//把JS源代码转成AST语法树
let estraverse = require('estraverse');///遍历语法树,修改树上的节点
let escodegen = require('escodegen');//把AST语法树重新转换成代码
let code = `function ast(){}`;
let ast = esprima.parse(code);
let indent = 0;
const padding = ()=>" ".repeat(indent);
estraverse.traverse(ast,{
    enter(node){
        console.log(padding()+node.type+'进入');
        if(node.type === 'FunctionDeclaration'){
            node.id.name = 'newAst';
        }
        indent+=2;
    },
    leave(node){
        indent-=2;
        console.log(padding()+node.type+'离开');
    }
});

Program进入
  FunctionDeclaration进入
    Identifier进入
    Identifier离开
    BlockStatement进入
    BlockStatement离开
  FunctionDeclaration离开
Program离开

5.babel #

Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行
工作过程分为三个部人
- Parse(解析) 将源代码转换成抽象语法树，树上有很多的estree节点
- Transform(转换) 对抽象语法树进行转换
- Generate(代码生成) 将上一步经过转换过的抽象语法树生成新的代码

5.1 AST遍历 #

AST是深度优先遍历
访问者模式 Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
Visitor 的对象定义了用于 AST 中获取具体节点的方法
Visitor 上挂载以节点 type 命名的方法，当遍历 AST 的时候，如果匹配上 type，就会执行对应的方法

5.2 babel 插件 #

@babel/core Babel 的编译器，核心 API 都在这里面，比如常见的 transform、parse
babylon Babel 的解析器
babel-types 用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法，对编写处理 AST 逻辑非常有用
babel-traverse用于对 AST 的遍历，维护了整棵树的状态，并且负责替换、移除和添加节点
babel-types-api
Babel 插件手册
babeljs.io babel 可视化编译器

5.2.1 转换箭头函数 #

astexplorer
babel-plugin-transform-es2015-arrow-functions
babeljs.io babel 可视化编译器
babel-handbook
babel-types-api

转换前

const sum = (a,b)=>{
    console.log(this);
    return a+b;
}

转换后

var _this = this;

const sum = function (a, b) {
  console.log(_this);
  return a + b;
};

npm i @babel/core babel-types -D

实现

let core = require('@babel/core');
let types = require('babel-types');
let  BabelPluginTransformEs2015ArrowFunctions = require('babel-plugin-transform-es2015-arrow-functions');
const sourceCode = `
const sum = (a,b)=>{
    console.log(this);
    return a+b;
}
`;
//babel插件其实是一个对象，它会有一个visitor访问器
let BabelPluginTransformEs2015ArrowFunctions2 = {
    //每个插件都会有自己的访问器
    visitor:{
        //属性就是节点的类型，babel在遍历到对应类型的节点的时候会调用此函数
        ArrowFunctionExpression(nodePath){//参数是节点的数据
            let node = nodePath.node;//获取 当前路径上的节点
            //处理this指针的问题
            hoistFunctionEnvironment(nodePath);
            node.type = 'FunctionExpression';
        }
    }
}
function hoistFunctionEnvironment(fnPath){
   const thisEnvFn = fnPath.findParent(p=>{
       //是一个函数，不能是箭头函数 或者 是根节点也可以
       return (p.isFunction() && !p.isArrowFunctionExpression())||p.isProgram()
   });
   //找一找当前作用域哪些地方用到了this的路径
   let thisPaths = getScopeInfoInformation(fnPath);
   //声明了一个this的别名变量，默认是_this __this
   let thisBinding = '_this';
   if(thisPaths.length>0){
       //在thisEnvFn的作用域内添加一个变量，变量名_this,初始化的值为this
    thisEnvFn.scope.push({
        id:types.identifier(thisBinding),
        init:types.thisExpression()    
    });
    thisPaths.forEach(item=>{
        //创建一个_this的标识符  
        let thisBindingRef = types.identifier(thisBinding);
        //把老的路径 上的节点替换成新节点
        item.replaceWith(thisBindingRef);
    });
   }
}
function getScopeInfoInformation(fnPath){
  let thisPaths = [];
  //遍历当前path所有的子节点路径，
  //告诉 babel我请帮我遍历fnPath的子节点，遇到ThisExpression节点就执行函数，并且把对应的路径传进去 
  fnPath.traverse({
    ThisExpression(thisPath){
        thisPaths.push(thisPath);
    }
  });
  return thisPaths;
}

let targetCode = core.transform(sourceCode,{
    plugins:[BabelPluginTransformEs2015ArrowFunctions2]
});
console.log(targetCode.code);

5.2.2 把类编译为 Function #

@babel/plugin-transform-classes

es6

class Person {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

classast

es5

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function () {
  return this.name;
};

es5class1 es5class2

实现

//核心库，提供了语法树的生成和遍历的功能
let babel = require('@babel/core');
//工具类，可能帮我们生成相应的节点
let t = require('babel-types');
//babel_plugin-transform-classes
let TransformClasses = require('@babel/plugin-transform-classes');
let es6Code = `class Person{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
}
`;
let transformClasses2 = {
    visitor: {
        ClassDeclaration(nodePath) {
            let {node} = nodePath;
            let id = node.id;//{type:'Identifier',name:'Person'}
            console.log(id);
            let methods = node.body.body;
            let nodes = [];
            methods.forEach(classMethod=>{
                if(classMethod.kind === 'constructor'){
                    let constructorFunction = t.functionDeclaration(
                        id, classMethod.params, classMethod.body,
                         classMethod.generator, classMethod.async);
                         nodes.push(constructorFunction);
                }else{
                    let prototypeMemberExpression = t.memberExpression(id, t.identifier('prototype'));
                    let keyMemberExpression = t.memberExpression(prototypeMemberExpression, classMethod.key);
                    let memberFunction = t.functionExpression(
                        id, classMethod.params, classMethod.body,
                         classMethod.generator, classMethod.async);
                    let assignmentExpression=t.assignmentExpression("=", 
                    keyMemberExpression,
                    memberFunction);
                    nodes.push(assignmentExpression);
                }
            });
            if(nodes.length==1){
                nodePath.replaceWith(nodes[0]);
            }else if(nodes.length>1){
                nodePath.replaceWithMultiple(nodes);
            }
        }
    }
}


let es5Code = babel.transform(es6Code,{
    plugins:[transformClasses2]
});
console.log(es5Code.code);

6. webpack TreeShaking插件 #

var babel = require("@babel/core");
let { transform } = require("@babel/core");

6.1 实现按需加载 #

import { flatten, concat } from "lodash";

treeshakingleft

转换为

import flatten from "lodash/flatten";
import concat from "lodash/flatten";

treeshakingright

6.2 webpack 配置 #

cnpm i webpack webpack-cli -D

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options:{
                   plugins:[
                     [
                       path.resolve(__dirname,'plugins/babel-plugin-import.js'),
                       {
                         libraryName:'lodash'
                       }
                     ]
                   ]
                }
        },
      },
    ],
  },
};

编译顺序为首先plugins从左往右,然后presets从右往左

6.3 babel 插件 #

plugins\babel-plugin-import.js

let babel = require("@babel/core");
let types = require("babel-types");
const visitor = {
  ImportDeclaration: {
    enter(path, state = { opts }) {
      const specifiers = path.node.specifiers;
      const source = path.node.source;
      if (
        state.opts.libraryName == source.value &&
        !types.isImportDefaultSpecifier(specifiers[0])
      ) {
        const declarations = specifiers.map((specifier, index) => {
          return types.ImportDeclaration(
            [types.importDefaultSpecifier(specifier.local)],
            types.stringLiteral(`${source.value}/${specifier.local.name}`)
          );
        });
        path.replaceWithMultiple(declarations);
      }
    },
  },
};
module.exports = function (babel) {
  return {
    visitor,
  };
};

7. 参考 #

Babel 插件手册
babel-types
不同的 parser 解析 js 代码后得到的 AST
在线可视化的看到 AST
babel 从入门到入门的知识归纳
Babel 内部原理分析
babel-plugin-react-scope-binding
transform-runtime Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译,启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数
ast-spec
babel-handbook