20.重学webpack——手写babel中的es6中的箭头函数转成es5中的普通函数的插件(了解)

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用,当然,建议结合《webpack学完这些就够了》一起学习。
从16节开始,专攻webpack原理,只有深入原理,才能学到webpack设计的精髓,从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文:


babel能够将es6的大部分语法转换成es5,例如箭头函数转成普通函数等。今天就利用babel的一些库,手写一版箭头函数转换成普通函数,感受下ast语法树的作用。

依赖库介绍(重点)

  • @babel/core
    • @babel/core是babel的核心包,但本身不知道如何转换代码,所以要借助插件,比如下面的babel-plugin-transform-es2015-arrow-functions用于转换箭头函数
  • babel-types
    • babel-types是babel的工具包,比如用于判断某个几点是不是某个类型,动态创建某个类型的节点等
  • babel-plugin-transform-es2015-arrow-functions
    • 该插件用于将es6的箭头函数转成es5的普通函数

插件介绍(重点)

  • 类似上面的babel-plugin-transform-es2015-arrow-functions插件其实本质上是一个钩子函数,在遍历语法树的过程中,可以捕获牟特特别类型的节点并进行转换
  • 每个es6语法都会对应一个转换插件
  • 每个插件都会捕获自己的语法节点,转成对应的es5语法
  • 所有插件打包成一个包,就是preset,比如@babel/preset-env就是插件的集合,包含着基本上大部分的es6语法转换插件
  • 插件的格式是定死的,就是一个对象,对象里有一个visitor的访问器(设计模式:访问者模式)

babel如何将箭头函数转成普通函数(了解)

  • 原先的es6函数
const sum = (a, b) => {
  console.log(this)
  return a + b;
}
  • babel转换的过程
// @babel/core是babel的核心包
// @babel/core本身不知道如何转换代码,所以要借助插件,比如下面的babel-plugin-transform-es2015-arrow-functions用于转换箭头函数
let babelCore = require('@babel/core')
// babel-types是babel的工具包,判断某个节点是不是某个类型,动态创建某个类型的节点
let types = require('babel-types');
// 箭头函数转换插件
// 插件其实就是一个钩子函数,在遍历语法树的过程中,可以捕获某些特别类型的节点并进行转换
// 每个es6的语法都会对应一个插件
// 每个插件都会捕获自己的语法节点,转成对应的es5语法
// 所有的插件打成一个包,就是preset @babel/preset-env 是插件集合,包含着基本上大部分的es6语法转换插件
let ArrowFunctionsPlugin = require('babel-plugin-transform-es2015-arrow-functions');
let sourceCode = `
const sum = (a, b) => {
  console.log(this)
  return a + b;
}
`;
let targetCode = babelCore.transform(sourceCode, {
  // presets: ["@babel/preset-env"], // 可以写成这种预设,也可以写成下面的插件数组,预设是插件的集合
  plugins: [ArrowFunctionsPlugin]
})
console.log(targetCode.code)
/*
结果:
var _this = this;

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

*/

自己实现箭头函数转换插件

自己转换实现箭头函数转换插件,其实就是重写一个箭头函数转换插件

// @babel/core是babel的核心包
// @babel/core本身不知道如何转换代码,所以要借助插件,比如下面的babel-plugin-transform-es2015-arrow-functions用于转换箭头函数
let babelCore = require('@babel/core')
// babel-types是babel的工具包,判断某个节点是不是某个类型,动态创建某个类型的节点
let types = require('babel-types');
// 箭头函数转换插件
// 插件其实就是一个钩子函数,在遍历语法树的过程中,可以捕获某些特别类型的节点并进行转换
// 每个es6的语法都会对应一个插件
// 每个插件都会捕获自己的语法节点,转成对应的es5语法
// 所有的插件打成一个包,就是preset @babel/preset-env 是插件集合,包含着基本上大部分的es6语法转换插件
let ArrowFunctionsPlugin = require('babel-plugin-transform-es2015-arrow-functions');
let sourceCode = `
const sum = (a, b) => {
  console.log(this)
  return a + b;
}
`

/*
  节点替换的原理简单举例:
  let node = {
    type: "Identifier",
    identifierName: "sum",
    name: "sum"
  }

  let nodePath = {
    node:node,
    replaceWith(newNode){
      nodePath.node = newNode
    },
    remove(){
      
    }
  }
  nodePath.replaceWith(newNode);
  上面这句replaceWith的意思就是:
  nodePath.node = newNode
*/

// 自己写一个箭头函数转换插件
// 插件的格式是定死的,就是一个对象,对象里有一个visitor的访问器(设计模式:访问者模式)
let ArrowFunctionsPlugin2 = {
  // 每个插件都有自己的访问器
  visitor: {
    // 处理所有箭头函数节点, ArrowFunctionExpression其实就是AST语法树中的节点的type
    ArrowFunctionExpression(nodePath){ // 参数是节点所在的路径
      let { node } = nodePath;
      // 处理this指向的问题
      hoistFunctionEnvironment(nodePath); // 提升函数的运行环境

      // 将箭头函数改成普通函数
      node.type = 'FunctionExpression' // 类型变成普通函数,这样箭头函数就变成了普通函数
    }
  }
}
// 提升函数的运行环境
function hoistFunctionEnvironment(fnPath){
  // 从当前的路径向上查找,查找this定义的位置
  const thisEnvFn = fnPath.findParent(p => {
    // es5代码中自由两种作用域:全局和函数
    // 所以要找到 不是箭头函数的普通函数,或者 跟作用域
    return (p.isFunction()&&!p.isArrayFunctionExpression()) || p.isProgram(); // ||之前的表示  node是函数,但是不是箭头函数,也就是为普通函数; ||之后的表示 跟作用域
  });
  // 找一找当前作用于内哪些地方用到了this
  let thisPaths = getScopeInfoInformation(fnPath);
  // 先声明一个变量 this=>_this ,真正插件中,遇到this会变成_this,但是有可能用户自己定义了_this,那么会给用户自己定义的_this再加一个_,也就是用户自己定义的_this变成了__this
  let thisBinding = '_this';
  // 如果子节点里有this的话
  if (thisPaths.length > 0) {
    // 生成 var _this = this;
    // 向此路径内的作用于内添加一个变量
    thisEnvFn.scope.push({
      id: types.identifier(thisBinding), // types是工具包 生成一个标识符,即_this
      init: types.thisExpression() // 生成一个this调用 this
    })
    // 修改变量 把作用域中的this改成_this
    thisPaths.forEach(thisPath => {
      let thisBindingIdentifer = types.identifier(thisBinding);// _this
      // 把此路径上面挂在的节点进行替换,把this节点替换成_this节点
      thisPath.replaceWith(thisBindingIdentifer)
    })

  }
}

function getScopeInfoInformation(fnPath){
  let thisPaths = []; // 存放this的path的数组u
  // 遍历当前路径的子路径
  fnPath.traverse({
    // this在节点中的type就是ThisExpression
    ThisExpression(thisPath){
      thisPaths.push(thisPath)
    }
  });
  return thisPaths;
}

let targetCode = babelCore.transform(sourceCode, {
  // presets: ["@babel/preset-env"], // 可以写成这种预设,也可以写成下面的插件数组,预设是插件的集合
  plugins: [ArrowFunctionsPlugin2]
})
console.log(targetCode.code)

/*
结果:
var _this = this;

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

*/
  • 节点替换原理其实就是:
let node = {
    type: "Identifier",
    identifierName: "sum",
    name: "sum"
  }

  let nodePath = {
    node:node,
    replaceWith(newNode){
      nodePath.node = newNode
    },
    remove(){
      
    }
  }
  nodePath.replaceWith(newNode);
  上面这句replaceWith的意思就是:
  nodePath.node = newNode

你可能感兴趣的:(箭头函数,ast,es6,es5,babel)