{
  plugins: [
    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining'
  ]
}

起源

Babel 指的是 通天塔，是巴比伦文明里面的 通天塔 当时地上的人们都说同一种语言，当人们离开东方之后，他们来到了示拿之地。在那里，人们想方设法烧砖好让他们能够造出一座城和一座高耸入云的塔来传播自己的名声，以免他们分散到世界各地。上帝来到人间后看到了这座城和这座塔，说一群只说一种语言的人以后便没有他们做不成的事了；于是上帝将他们的语言打乱，这样他们就不能听懂对方说什么了，还把他们分散到了世界各地，这座城市也停止了修建。这座城市就被称为“巴别城”。 -- 《创世记》

babel是啥?

前置知识

1. ES standard

1. TC39

• Stage0(strawman): 任何讨论、想法、改变或者还没加到提案的特性都在这个阶段

• Stage1(proposal): 产出一个正式的提案

• Stage2(draft): 草案, 提案更加详细, 之后草案只允许增量更新

• Stage3(candidate): 候选阶段, 已经很接近标准化了, 这个时候可能部分浏览器已经实现了此标准

• Stage4(finished): 完成, 将会出现在下一个年度的ES标准中

版本

babel的架构

1. 核心包

1. 转译与转换

1. 帮助类包

1. 插件

原理初探

1. parse @babel/parser

1. transform @babel/traverse

1. generate @babel/generate

实现一个tiny-babel

词法转换

[
  { type: 'paren', value: '(' },
  { type: 'name', value: 'add' },
  { type: 'number', value: '2' },
  { type: 'paren', value: '(' },
  { type: 'name', value: 'subtract' },
  { type: 'number', value: '4' },
  { type: 'number', value: '2' },
  { type: 'paren', value: ')' },
  { type: 'paren', value: ')' }
]

function tokenizer(input) {
  let current = 0
  let tokens = []
  while (current < input.length) {
    let char = input[current]
    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' })
      current++
      continue
    }
    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' })
      current++
      continue
    }
    let WHITESPACE = /s/
    if (WHITESPACE.test(char)) {
      current++
      continue
    }
    let NUMBERS = /[0-9]/
    if (NUMBERS.test(char)) {
      let value = ''
      while (NUMBERS.test(char)) {
        value += char
        char = input[++current]
      }
      tokens.push({ type: 'number', value })
      continue
    }
    if (char === '"') {
      let value = ''
      char = input[++current]
      while (char !== '"') {
        value += char
        char = input[++current]
      }
      char = input[++current]
      tokens.push({ type: 'string', value })
      continue
    }
    let LETTERS = /[a-z]/i
    if (LETTERS.test(char)) {
      let value = ''
      while (LETTERS.test(char)) {
        value += char
        char = input[++current]
      }
      tokens.push({ type: 'name', value })
      continue
    }
    throw new TypeError('I dont know what this character is: ' + char)
  }
  return tokens
}

语法转换

const test1 = {
  type: 'Program',
  body: [
    {
      type: 'CallExpression',
      name: 'add',
      params: [
        { type: 'NumberLiteral', value: '2' },
        {
          type: 'CallExpression',
          name: 'subtract',
          params: [
            { type: 'NumberLiteral', value: '4' },
            { type: 'NumberLiteral', value: '2' }
          ]
        }
      ]
    }
  ]
}
function parser(tokens) {
  let current = 0
  function walk() {
    let token = tokens[current]
    if (token.type === 'number') {
      current++
      return { type: 'NumberLiteral', value: token.value }
    }
    if (token.type === 'string') {
      current++
      return { type: 'StringLiteral', value: token.value }
    }
    if (token.type === 'paren' && token.value === '(') {
      token = tokens[++current]
      let node = { type: 'CallExpression', name: token.value, params: [] }
      token = tokens[++current]
      while (
        token.type !== 'paren' ||
        (token.type === 'paren' && token.value !== ')')
      ) {
        node.params.push(walk())
        token = tokens[current]
      }
      current++
      return node
    }
    throw new TypeError(token.type)
  }
  let ast = { type: 'Program', body: [] }
  while (current < tokens.length) {
    ast.body.push(walk())
  }
  return ast
}

访问者

1. DFS无法在任意节点上进行中止, 或对其周围, 甚至顶层的对象进行处理, 也无法处理一些异步的情况

2. 直接通过DFS来遍历, 我们无法很方便的获知到当前节点的父节点等等的信息.

{
  Program: { enter(node, parent) {}, exit(node, parent) {} },
  CallExpression: { enter(node, parent) {}, exit(node, parent) {} },
  NumberLiteral: { enter(node, parent) {}, exit(node, parent) {} }
}

访问器

function traverser(ast, visitor) {
  function traverseArray(array, parent) {
    array.forEach(child => {
      traverseNode(child, parent)
    })
  }
  function traverseNode(node, parent) {
    let methods = visitor[node.type]
    if (methods && methods.enter) {
      methods.enter(node, parent)
    }
    switch (node.type) {
      case 'Program':
        traverseArray(node.body, node)
        break
      case 'CallExpression':
        traverseArray(node.params, node)
        break
      case 'NumberLiteral':
      case 'StringLiteral':
        break
      default:
        throw new TypeError(node.type)
    }
    if (methods && methods.exit) {
      methods.exit(node, parent)
    }
  }
  traverseNode(ast, null)
}

转换器

function transformer(ast) {
  let newAst = { type: 'Program', body: [] }
  ast._context = newAst.body
  traverser(ast, {
    NumberLiteral: {
      enter(node, parent) {
        parent._context.push({ type: 'NumberLiteral', value: node.value })
      }
    },
    StringLiteral: {
      enter(node, parent) {
        parent._context.push({ type: 'StringLiteral', value: node.value })
      }
    },
    CallExpression: {
      enter(node, parent) {
        let expression = {
          type: 'CallExpression',
          callee: { type: 'Identifier', name: node.name },
          arguments: []
        }
        node._context = expression.arguments
        if (parent.type !== 'CallExpression') {
          expression = { type: 'ExpressionStatement', expression: expression }
        }
        parent._context.push(expression)
      }
    }
  })
  return newAst
}

转换完成

1. 字符串通过词法转换, 生成token

2. token转换生成AST

3. AST通过访问器来逐个遍历和访问

4. 最终通过特定的逻辑转换成为目标的AST, 从而实现语法的转换

实现一个babel插件

// 我们编写的原始引入方式, 会引入全量的antd组件
import { Button } from 'antd'
// 在babel中配置按需引入"plugins": [["babel-plugin-import", { "libraryName": "antd", "libraryDirectory": "lib", "style": true }]]
// 原有的引用方式会变成
var _button = require('antd/lib/button'); require('antd/lib/button/style');

STEP1: 创建插件

// 假设插件名为plugin-test
 "plugins": [["./plugin-test.js", { "libraryName": "antd", "libraryDirectory": "lib", "style": true }]]

module.exports = function({types: t}) {
  return {
    visitor: {
    // ...
    }
  }
}

STEP2: 查看AST

import { Button } from 'antd';

1. 确认此import语法的源是否与传入的libraryName一致, 只有一致才需要进行转换

2. 获取到通过解构语法引入的组件列表

3. 遍历组件列表, 生成新的组件引入语法

4. 删除当前import节点

STEP3: 编写插件

const {addDefault, addSideEffect} = require('@babel/helper-module-imports')
module.exports = function({types: t}) {
  return {
    visitor: {
      ImportDeclaration(path, state) {
        const {libraryName, libraryDirectory = "lib", style = true} = state.opts
        // 找到source为当前传入的libraryName的import
        if (path.node?.source?.value === libraryName) {
          const specifiers = path.node?.specifiers
          // 遍历引入的单个组件
          specifiers.forEach(v => {
            // 获取组件的名称
            const componentName = v.imported.name
            // 根据组件的名称来新曾组件和样式引入
            addDefault(path, `${libraryName}/${libraryDirectory}/${componentName}`, { nameHint: componentName })
            addSideEffect(path, `${libraryName}/${libraryDirectory}/${componentName}/style`)

          })
          // 移除当前组件
          path.remove()
        }
      }
    }
  }
}

STEP4: 优化

1. 如果我引入了组件, 但是在之后并没有使用到, 是不是可以在这个时候shaking掉?

babel的"坑"

1. 傻傻分不清楚的命名规则(删掉)

{
  "plugin": ["@babel/plugin-transform-runtime"]
}

{
  "plugin": ["@babel/transform-runtime"]
}

{
  "plugin": ["transform-runtime"]
}

1. polyfill的问题

• 直接在html文件引入Babel官方的polyfill.js脚本文件；

• 在前端工程的入口文件里引入polyfill.js；

• 在前端工程的入口文件里引入@babel/polyfill；

• 在前端工程的入口文件里引入core-js/stable与regenerator-runtime/runtime；

• 在前端工程构建工具的配置文件入口项引入polyfill.js；

• 在前端工程构建工具的配置文件入口项引入@babel/polyfill；

• 在前端工程构建工具的配置文件入口项引入core-js/stable与regenerator-runtime/runtime；

// 按此预设, 理论上说ie11没有支持Promise, 所以应该加上Promise的polyfill才对
// 但是并没有加上
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 58,
          "ios": 8,
          "ie": 11
        }
      }
    ]
  ],
  "plugins": [["@babel/plugin-transform-runtime", {}]]
}

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 58,
          "ios": 8,
          "ie": 11
        }
      }
    ]
  ],
  "plugins": [["@babel/transform-runtime", { "corejs": 3 }]]
}

1. babel插件的优先级策略

• plugin优先级高于preset

• plugin是左到右执行

• preset是右到左执行

1. babel-preset-env包含了哪些包?

好用的在线调试工具

1. babel在线配置调试

1. ast explorer

1. @babel/types

module.exports = function({types: t}) {
  return {
    visitor: {
      // ...
    }
  }
}