箭头函数转换插件

先来看看 ES 标准下的箭头函数 和 普通函数的 AST 区别

  1. const sum = (a, b) => a + b
  2. const sum = function(a, b) { return a + b }

image.pngimage.png
我们需要把 ArrowFunctionExpression 节点换成 FunctionExpression 节点，从图中我们可以看到，我们需要修改节点的 type 、body 、range 等属性，比较繁琐。

由于 babel 的生态十分丰富且坚挺，我们使用 babel 的工具包 [@babel/core](https://babel.docschina.org/docs/en/babel-core/)和[@babel/types](https://babel.docschina.org/docs/en/babel-types/)来简化我们的操作。

  1. @babel/core提供了JavaScript 转 AST，AST 转 JavaScript 的功能
  2. @babel/types提供了判断节点类型，创建节点的功能
  1. const babel = require('@babel/core')
  2. const t = require('@babel/types')
  4. const source = `
  5. const good = () => {}
  6. let sum = (a, b) => { return a + b }
  7. `
  9. // 箭头函数转换插件
  10. const ArrowTransformPlugin = {
  11.   visitor: {
  12.     // path 是树的路径
  13.     ArrowFunctionExpression: function (path) {
  14.       const node = path.node
  15.       let blockStatement = node.body
  16.       // 如果不是代码块，就改成代码块
  17.       if (!t.isBlockStatement(blockStatement)) {
  18.         const returnStatement = t.returnStatement(node.body)
  19.         blockStatement = t.blockStatement([returnStatement])
  20.       }
  21.       const fnExpression = t.functionExpression(null, node.params, blockStatement)
  22.       path.replaceWith(fnExpression)
  24.     }
  25.   }
  26. }
  28. const result = babel.transform(source, {
  29.   plugins: [
  30.     ArrowTransformPlugin
  31.   ]
  32. })
  34. console.log(result.code)

class 类转换插件

简单模拟 babel 的类声明转换为函数声明，待完善的功能

  • 类的继承
  • super 方法 ```javascript const babel = require(‘@babel/core’) const t = require(‘@babel/types’)

const source = class Father { constuctor(name) { this.name = name } getName() { console.log(this.name) } }

const ClassTransformPlugin = { visitor: { ClassDeclaration: function (path) { const { node } = path const classMethodNodeList = node.body.body const className = node.id let fnDeclaration = t.functionDeclaration(className, [], t.blockStatement([])) const prototypeMethods = [] classMethodNodeList.forEach(nodeItem => { if (nodeItem.key.name === ‘constuctor’) { // 添加构造函数的方法 fnDeclaration = t.functionDeclaration(className, nodeItem.params, nodeItem.body) } else { // 添加原型的方法 let prototype = t.memberExpression(className, t.identifier(‘prototype’)) const left = t.memberExpression(prototype, t.identifier(nodeItem.key.name)) t.identifier(nodeItem.key.name) const right = t.functionExpression(null, [], nodeItem.body) // // 创建赋值表达式，添加函数原型方法 const prototypeMethod = t.assignmentExpression(‘=’, left, right) prototypeMethods.push(prototypeMethod) } }) if (!prototypeMethods.length) { path.replaceWith(fnDeclaration) } else { prototypeMethods.push(fnDeclaration) path.replaceWithMultiple(prototypeMethods) } } } }

const result = babel.transform(source, { plugins: [ ClassTransformPlugin ] })

console.log(result.code)

  1. <a name="Dq9qs"></a>
  2. ## JSX 转换插件
  3. babel 转换 JSX 语法的工具包是 `@babel/preset-react`这个预设，它包含了以下插件
  5. - [@babel/plugin-syntax-jsx](https://www.babeljs.cn/docs/babel-plugin-syntax-jsx)：让 @babel/core 能识别 JSX 语法，正确构建 babel 的 AST 标准树
  6. - [@babel/plugin-transform-react-jsx](https://www.babeljs.cn/docs/babel-plugin-transform-react-jsx)：将 JSX 语法转换为 react 创建元素的语法
  7. - [@babel/plugin-transform-react-display-name](https://www.babeljs.cn/docs/babel-plugin-transform-react-display-name)
  9. 如果开启了 `development`参数，还将包含以下插件
  11. - [@babel/plugin-transform-react-jsx-self](https://www.babeljs.cn/docs/babel-plugin-transform-react-jsx-self)
  12. - [@babel/plugin-transform-react-jsx-source](https://www.babeljs.cn/docs/babel-plugin-transform-react-jsx-source)
  14. 下面我们试着实现将含 JSX 语法的 JS 代码转换成 babel 标准的 AST 的功能
  16. 1. 词法分析：JS 代码 转换为 tokens
  17. 2. 语法分析：tokens 转换为 AST 
  18. ```javascript
  19. const babel = require('@babel/core')
  20. const t = require('@babel/types')
  22. const source = `
  23. let element = <p>Konsoue</p>
  24. `
  26. /**
  27.  * 词法分析：先将 JS 代码转成 tokens
  28.  * [
  29.  *   { type: 'KeyWord', value: 'let' },
  30.  *   { type: 'WhiteSpace', value: ' ' },
  31.  *   { type: 'Identifier', value: 'element'}
  32.  *   { type: 'WhiteSpace', value: ' ' },
  33.  *   { type: 'Equal', value: '=' },
  34.  *   { type: 'WhiteSpace', value: ' ' },
  35.  *   { type: 'JSXElement', value: '<p>Konsoue</p>' },
  36.  * ]
  37.  */
  38. function JSXToTokens(source) {
  39.   const tokens = []
  40.   let token;
  41.   const isWord = /[a-zA-Z]/
  42.   const isWhiteSpace = /\s/
  43.   const isEqual = /=/
  44.   for (let i = 0; i < source.length; i++) {
  45.     let char = source.charAt(i)
  46.     if (isWord.test(char)) {
  47.       token = { type: 'Identifier', value: char }
  48.       while (i++ < source.length) {
  49.         char = source.charAt(i)
  50.         if (isWord.test(char)) {
  51.           token.value += char
  52.         } else {
  53.           if (['let', 'const', 'var'].includes(token.value)) token.type = 'KeyWord'
  54.           i--
  55.           break
  56.         }
  57.       }
  58.     } else if (isWhiteSpace.test(char)) {
  59.       token = { type: 'WhiteSpace', value: ' ' }
  60.       while (i++ < source.length) {
  61.         char = source.charAt(i)
  62.         if (isWhiteSpace.test(char)) {
  63.           token.value += char
  64.         } else {
  65.           i--
  66.           break
  67.         }
  68.       }
  69.     } else if (isEqual.test(char)) {
  70.       token = { type: 'Equal', value: char }
  71.     } else if (char === '<') {
  72.       token = { type: 'JSXElement', value: char }
  73.       let isClose = false
  74.       while (i++ < source.length) {
  75.         char = source.charAt(i)
  76.         token.value += char
  77.         if (char === '/') {
  78.           isClose = true
  79.         } else if (char === '>' && isClose) {
  80.           break
  81.         }
  82.       }
  83.     } else {
  84.       token = { type: 'String', value: char }
  85.       while (i++ < source.length) {
  86.         char = source.charAt(i)
  87.         token.value += char
  88.       }
  89.       if (!Number.isNaN(Number(token.value))) token = { type: 'Numeric', value: Number(token.value) }
  90.       else {
  91.         let str = '', start = false
  92.         // 去掉字符串外层的双引号 ""
  93.         const top = token.value[0] // 获取第一个引号，用于判断是单引号还是双引号
  94.         for (let j = token.value.length - 1; j > 0; j--) {
  95.           if (start) str = token.value[j] + str
  96.           else {
  97.             if (token.value[j] === top) start = true
  98.           }
  99.         }
  100.         token.value = str
  101.       }
  102.     }
  103.     tokens.push(token)
  104.   }
  105.   return tokens
  106. }
  108. /**
  109.  * 语法分析：将 tokens 转成 AST
  110.  * @param {*} tokens
  111.  */
  112. const parser = (tokens) => {
  113.   const AST = {
  114.     type: 'Program',
  115.     body: [],
  116.     sourceType: 'module'
  117.   }
  118.   let i = 0
  119.   let currentToken
  120.   while (currentToken = tokens[i]) {
  121.     if (currentToken.type === 'KeyWord') {
  122.       const VariableDeclaration = { type: 'VariableDeclaration', declarations: [], kind: currentToken.value }
  123.       i += 2
  124.       currentToken = tokens[i]
  125.       const VariableDeclarator = {
  126.         type: 'VariableDeclarator',
  127.         id: {
  128.           type: 'Identifier',
  129.           name: currentToken.value
  130.         }
  131.       }
  132.       i += 2
  133.       while (['WhiteSpace', 'Equal'].includes(tokens[i].type)) i++
  134.       currentToken = tokens[i]
  135.       if (['String', 'Numeric'].includes(currentToken.type)) {
  136.         VariableDeclarator.init = {
  137.           type: currentToken.type + 'Literal',
  138.           value: currentToken.value
  139.         }
  140.       } else if (currentToken.type === 'JSXElement') {
  141.         const value = currentToken.value
  142.         const reg = /<([^>]+)>([^<]+)<\/([^>]+)>/
  143.         const [, openTagName, childrenText, closeTagName] = value.match(reg)
  144.         VariableDeclarator.init = {
  145.           type: 'JSXElement',
  146.           openingElement: {
  147.             type: 'JSXOpeningElement',
  148.             name: {
  149.               type: 'JSXIdentifier',
  150.               name: openTagName
  151.             },
  152.           },
  153.           closeElement: {
  154.             type: 'JSXOpeningElement',
  155.             name: {
  156.               type: 'JSXIdentifier',
  157.               name: closeTagName
  158.             }
  159.           },
  160.           children: {
  161.             type: 'JSXText',
  162.             value: childrenText
  163.           }
  164.         }
  165.       }
  166.       VariableDeclaration.declarations.push(VariableDeclarator)
  167.       AST.body.push(VariableDeclaration)
  168.     }
  169.     i++
  170.   }
  171.   return AST
  172. }
  174. const tokens = JSXToTokens(source)
  175. const AST = parser(tokens)
  176. console.log(JSON.stringify(AST))