第十四届 D2 参会总结

[QC-L]

今年相比去年较为突出的改变是多了实时翻译环节，感谢宋离同学。

本次的议题围绕微前端和 Serverless 展开，而从个人发展和业务需求的角度，所以选择了以下议题（其他的后面看视频）：

• Let's work together on the future of JavaScript through TC39
• JS 语言在引擎级别的执行过程
• 微前端沙盒体系
• 前端工程下一站：IDE
• Babel: Under the Hood
• 基于浏览器的实时构建探索之路
• 打酱油

废话不多说，开始正文：

Let's work together on the future of JavaScript through TC39 - Daniel Ehrenberg / TC39 核心成员

本次议题主要介绍了 TC39 以及其工作流程，并对提案进行了详细介绍。

ECMA 为相关文档，不推荐从头阅读，选自己感兴趣的部分读一读。

TC39 是 ECMA 的一个工作组，ECMA 是国际标准化组织。TC39 会有定期会议，每两个月会开三天会，会议会讨论语言的更改，寻求共识。（而非投票制）

会议记录

提案共分为 4 个阶段，分别是 Stage-1，Stage-2，Stage-3，Stage-4，提案进入 Stage-4 后，会在下一个 ECMAScript 正式版中发布，如 ES2020 会发布目前处于 Stage-4 阶段的提案。

接着，littledan 介绍了一些新提案：

Stage-4

• tc39/proposal-bigint
• tc39/proposal-dynamic-import
• tc39/proposal-intl-relative-time
• tc39/proposal-optional-chaining
• tc39/proposal-nullish-coalescing

Stage-3

• tc39/proposal-weakrefs
• tc39/proposal-class-fields

Stage-2

• tc39/proposal-decorators
• tc39/proposal-temporal

Stage-1

• tc39/proposal-pipeline-operator
• tc39/proposal-record-tuple
• littledan/proposal-operator-overloading （littledan 负责的提案，该提案仍存在争议）

Stage-0

• Decimal

以上为各阶段的部分提案，具体提案可在各提案的文档中找到：

• Stage-0
• Stage-1
• Stage-2 以及 Stage-3
• Stage-4

同时还可以在这些文档中还能找到会议有关的记录。

Babel: Under the Hood - Nicolò Ribaudo / Babel 核心贡献者

随着 webpack，rollup 等打包工具的普及，现在的前端开发基本上都已离不开 Babel，我接触 Babel 是在 2017 年，那时将 Babel 英文文档翻译为了中文，也参与了新版 Babel 官网（v7）的建设工作。

和 Nicolò 也在 Github 上有过互动，真是年轻有为的开发者。

Nicolò 在此次演讲中主要介绍了 Babel 的原理以及部分使用。基本上将 Babel 一些通用的功能做了介绍，很赞。

Babel 非传统的 Complier（编译器），而是个将 JavaScript 转为 JavaScript 的 Complier。

补充：Babel 将其他语言转为 JS 也可以转译为其他语言（通过编写插件），这个操作 Henry Zhu 在一次会议上做过演示，将 PHP 转成 JS，可以参考 React Rally 上 Henry 的视频 的视频（6 分钟的左右）。
当时为了方便 Babel 官网的读者，我将视频在优酷上同步了一份。

Babel 采用 AST 的形式（Abstract Syntax Tree，抽象语法树）对源代码进行处理。

正常来说，我们在开发时简单语法可以通过正则匹配的形式进行修改。

但是如果遇到复杂的情况，正则就无法胜任了。

因此采用 AST。

Babel 中不同的 package 完成不同的工作。

• @babel/parser 将源码解析生成 AST
  1. 词法分析（Lexical analysis）
  2. 语法分析（Syntax analysis)
  3. 语义分析（Semantic analysis)
• @babel/traverse 转换修改 AST
• @babel/generator 根据 AST 生成新的源码，但并不会帮你格式化代码（可以使用 prettier）
• @babel/core 核心库，很多 Babel 组件依赖，用于加载 preset 和 plugin
• @babel/types types 包含所有 AST 中使用的类型，便于修改 AST
• @babel/template 采用 template 的形式简化修改 AST 的过程

Nicolò 对于上述库做了介绍，并说明了使用方式。

各库的具体使用不做过多介绍，这里聊聊 traverse。

以代码 n => n * 2 举例，其 AST 结构为：

在使用 @babel/traverse 转换 AST 时，大体如下：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

const jsContent = `n => n * 2`
const ast = parser.parse(jsContent, { /* ... */});

// 采用深度优先遍历（DFS）
traverse(ast, {
  // 进入
  enter(path) {
    console.log(`${path.type} enter`)
    // console.dir(path, { depth: 1 })
  },
  // 退出
  exit(path) {
    console.log(`${path.type} exit`)
    // console.dir(path, { depth: 1 })
  }
})

根据 AST 图示，然后与输出结果对比：

其中每个节点都包含 enter 和 exit：

traverse(ast, {
  // 箭头函数
  ArrowFunctionExpression: {
    enter(path) {
      console.log(`${path.type} enter`)
      // console.dir(path, { depth: 1 })
    }
  }
})

如果只需要 enter，则可简化为：

traverse(ast, {
  // 箭头函数
  ArrowFunctionExpression(path) {
    console.log(`${path.type} enter`)
    // console.dir(path, { depth: 1 })
  }
})

最后 Nicolò 讲解了如何编写 babel 插件，插件的编写过程请参考 babel-handbook 插件手册。

注意：handbook 是 babel v6 时的教程，但意思大体相同。请参考思路。