babel能够转译ECMAScrIpt2015+的代码，使它能够在旧的浏览器中运行

1. babel工作分为三个部分

  1. 解析：将源代码转换成AST语法树
  2. 转换：将AST语法树进行转换
  3. 生成：将转换后的抽象语法树生成新的源代码

2. 简单实现babel插件

2.1 类转换成普通函数

  2. // babel核心模块
  3. const core = require('@babel/core');
  4. // 同来生成或者判断节点的AST语法树节点
  5. let types = require('@babel/types');
  7. //  官方插件
  8. // let transformClassesPlugins = require('@babel/plugin-transform-classes');
  9. //  自己模拟插件
  10. let transformClassesPlugins = {
  11.     visitor: {
  12.         ClassDeclaration (path) {
  13.             let node = path.node;
  14.             let id = node.id;
  15.             let methods = node.body.body;
  16.             let nodes = [];
  17.             methods.forEach(method => {
  18.                 // 是构造函数
  19.                 if (methods.kind === 'constructor') {
  20.                     // types.functionDeclaration 帮我们生成函数节点
  21.                     let constructorFunction = types.functionDeclaration(
  22.                         id,
  23.                         method.params,
  24.                         method.body
  25.                     );
  26.                     nodes.push(constructorFunction);
  27.                 } else {
  28.                     // 是普通函数
  29.                     // 表达式左边
  30.                     let memberExpression = types.memberExpression(
  31.                         types.memberExpression(
  32.                             id,
  33.                             types.identifier('prototype')
  34.                         ),
  35.                         method.key
  36.                     );
  38.                     // 表达式右边
  39.                     let functionExpression = types.functionExpression(
  40.                         null,
  41.                         method.params,
  42.                         method.body
  43.                     );
  45.                     // 赋值表达式
  46.                     let assignmentExpression = types.assignmentExpression(
  47.                         '=',
  48.                         memberExpression,
  49.                         functionExpression
  50.                     );
  51.                     nodes.push(assignmentExpression);
  52.                 }
  53.             })
  55.             if (nodes.length === 1) {
  56.                 // 单节点替换
  57.                 path.replaceWith(nodes[0])
  58.             } else {
  59.                 // 多节点替换
  60.                 path.replaceWithMultiple(nodes)
  61.             }
  62.         }
  63.     }
  64. };
  66. // 要转换的代码
  67. let sourceCode = `
  68. class Person {
  69.     constructor (name) {
  70.         this.name = name
  71.     }
  72.     sayName() {
  73.         console.log(this.name)
  74.     }
  75. }
  76. `;
  78. let tragetCode = core.transform(sourceCode, {
  79.     plugins: [transformClassesPlugins]
  80. });
  82. console.log(tragetCode.code)

2.2 箭头函数转换成普通函数

  2. // babel核心模块
  3. const core = require('@babel/core');
  4. // 同来生成或者判断节点的AST语法树节点
  5. let types = require('@babel/types');
  7. // 官方插件
  8. // let arrowFunctionPlugin = require('babel-plugin-transform-es2015-arrow-functions');
  10. // 模拟官方自定义实现
  11. let arrowFunctionPlugin = {
  12.     visitor: {
  13.         // 如果是箭头函数表达式，就会进入此函数，，参数是箭头函数的节点路径对象
  14.         ArrowFunctionExpression(path) {
  15.             let node = path.node;
  16.             // 把箭头函数的type改成函数表达式的type
  17.             node.type = 'FunctionExpression';
  18.         }
  19.     }
  20. };
  22. // 要转换的箭头函数
  23. let sourceCode = `
  24. const sum = (a, b) => {
  25.     return a + b
  26. }
  27. `;
  29. // 转换抽象语法树
  30. let tragetCode = core.transform(sourceCode, {
  31.     plugins: [arrowFunctionPlugin]
  32. });
  34. console.log(tragetCode.code)