概念

1. AST(Abstract Syntax Tree) 抽象语法树
2. webpack和Lint等很多的工具和库的核心都是通过Abstract Syntax Tree抽象语法树这个概念来实现对代码的检查、分析等操作的。通过了解抽象语法树这个概念，你也可以随手编写类似的工具

用途

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

抽象语法树定义

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

2. 在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

3. 普通代码转成抽象语法树的样子

   
   WX20180619-163315.png

javascript Parser

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

常用的JavaScript Parser

1. esprima
2. traceur
3. acorn
4. shift

esprima

1. 通过 esprima 把源码转化为AST
2. 通过 estraverse 遍历并更新AST
3. 通过 escodegen 将AST重新生成源码
4. demo如下

let esprima = require('esprima');
let estraverse = require('estraverse');
let escodegen = require('escodegen');
let code = 'function ast(){}'
//将源码转成ast
let ast = esprima.parse(code);
//遍历ast树
estraverse.traverse(ast, {
  enter(node) {

      console.log('enter', node.type)
      if(node.type == 'Identifier'){

          node.name += '_enter';
      }
  },
  leave(node) {

      console.log('leave', node.type)
      if(node.type == 'Identifier') {

          node.name += '_leave'
      }
  }
})
//遍历过程中打印的结果如下
enter Program
enter FunctionDeclaration
enter Identifier
leave Identifier
enter BlockStatement
leave BlockStatement
leave FunctionDeclaration
leave Program

//将ast树从新生成源码
let result = escodegen.generate(ast);
console.log(result)
//function ast_enter_leave() {
//}

5. 遍历ast树的过程分析

   
   WX20180619-171137.png
6. 一般我们会用babel-core, babel-type实现代码转换的功能

实现转换的3大法宝

1. https://astexplorer.net/ 通过该工具查看转换语法
2. babel-core
3. babel-types

转换箭头函数(babel-core, babel-types)

1. 访问者模式Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
2. babel-core
3. babel-types
4. Babel 插件手册
5. demo 如下

//babel核心库，用来实现核心的转换引擎(将源码转成ast,如果要做具体的业务操作，babel是不管的)
let bable = require('babel-core');
//可以实现类型判断，生成AST零部件
let types = require('babel-types');
//把该箭头喊出成es5普通函数
const code = `const sum = (a,b) => a+b`;
/**
* //把上面的箭头函数想转成es5普通的函数，我们可以倒着推，就是转成该函数需要哪些节点
* let sum = function(a,b){ return a+b; }
*
*/

//这个访问者可以对特定的类型的节点进行处理
let visitor = {
  //针对进入和离开都处理一次
  // ArrowFunctionExpression:{
  //     entry(){},
  //     leave(){}
  // }
  //这种方式只会处理一次
  ArrowFunctionExpression(path) {
      let params = path.node.params;
      //因为创建的函数body是blockStatement,所以创建一个
      let blockStatement = types.blockStatement([
          types.returnStatement(path.node.body)
      ], [])
      //创建一个function表达式
      let func = types.functionExpression(null, params, blockStatement, false, false)
      //用新穿件的表达式替换原来的表达式
      path.replaceWith(func)
  }
}

let arrayPlugin = {visitor};

//babel内部先把代码转成AST,然后进行遍历，遍历的时候会匹配visitor里面的函数，如果匹配则进行处理
let result = bable.transform(code, {
  plugins:[
      arrayPlugin
  ]
})
console.log(result.code)

5. 遍历ast树的过程

babel插件(预计算表达式)

1. 预计算简单表达式的插件

const result = 1 + 2; => 转成const result = 3;

2. 实现如下

//===========plugin.js
let code = `const result = 1000 * 60 * 60 *24`;
// let code = `const result = 1000*60`;
let types = require('babel-types');
let babel = require('babel-core');

//visit里面要放个函数，这个函数对应的就是要转换的节点类型，不知道的话，可以把要转换的代码贴到https://astexplorer.net/查看一下
var visitor = {
  BinaryExpression(path){
      //通过path.node可以拿到当前的节点
      let node = path.node;
      if(!isNaN(node.left.value) && !isNaN(node.right.value)){
          let numericLiteral = types.numericLiteral(eval(node.left.value+node.operator+node.right.value));

          path.replaceWith(numericLiteral);
        //如果此表达式的父亲也是一个表达式的话，需要递归计算
          if(path.parentPath.node.type === 'BinaryExpression'){

              visitor.BinaryExpression.call(null,path.parentPath)
          }
      }
  }
}

//let result = babel.transform(code, {
//    plugins:[
//        {visitor}
//    ]
//})
//console.log(result.code)
module.exports = function(babel){
  return {
      visitor
  }
}

//index.js===============
const babel = require('babel-core');
const result = babel.transform('const sum = 1+2+3',{
  plugins:[
      require('./plugin')
  ]
});
console.log(result.code);

webpack babel插件

• 实现按需加载(需求)

//lodash
import { flatten,concat } from "lodash"
//转为
import flatten from "lodash/flatten";
import concat from "lodash/flatten";

• babel配置

1. transform-runtime Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译,启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数
2. 配置

  {
      "presets":["react","stage-0","env"],
      "plugins":[
          ["extract", {"library":"lodash"}],
          ["transform-runtime", {}]
      ]
}

3. plugins和presets编译顺序是:首先plugins从左往右，然后是presets从右往左
4. babel插件

let babel = require('babel-core');
let types = require('babel-types');
const visitor = {
  ImportDeclaration:{
      enter(path,ref={opts:{}}){
          const specifiers = path.node.specifiers;
          const source = path.node.source;
          if(ref.opts.library == 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
  }
}

备注

1. Babel 插件手册
2. babel-types
3. 不同的parser解析js代码后得到的AST
4. 在线可视化的看到AST
5. babel从入门到入门的知识归纳
6. Babel 内部原理分析
7. babel-plugin-react-scope-binding