Babel 是什么,怎么做到的

482 阅读4分钟

核心描述

  • 概念:Babel 是一个 JavaScript 编译器。它是一个工具链,用于将 ECMAScript 2015+ 的语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
  • 核心原理(源码到源码的转移器实现):
    • parse:通过 parser 把源码转成抽象语法树(AST)
    • transform:遍历 AST ,调用各种 transform 插件对 AST 进行增删改
    • generate:把转换后的 AST 打印成目标代码,并生成 sourcemap
  • 基本用途:
    • 将项目中的 ES6+ 代码转换为浏览器都可以兼容的 ES5及以下的代码
    • 通过不同的配置项,来支撑实际业务中兼容的 JavaScript 版本,以及不同的目标浏览器
  • 拓展用途:
    • 利用 Babel 的插件机制,编写自定义的 Babel 插件,对项目代码进行 AST 静态分析,加入自定义的逻辑,产出项目需要的自定义代码
    • 全局添加或删除业务代码(自动埋点、自动国际化、类型检查等等,更多实战案例,可以参考掘金小册-《Babel 插件通关秘籍》)

知识拓展

  • 发展历史:Babel 前身是 6to5 ,它的转换 AST 引擎是 acron ,也就是 webpack 用的那个 AST 转换引擎。后来 6to5 和 Esnext 库(Ember 使用的)的团队共同开发了 Babel ,并把解析引擎改名为 Babylon ,现在是 @babel/parser 。
  • 核心源码组成(6个):
    • babel-core:AST 抽象语法树的核心实现,主要是将 ES6+ 的代码转化为 AST ,然后遍历 AST 树,添加一些修改,然后再将修改后的 AST 树转化为可以供浏览器识别的 code
    • babel-cli:执行一些可以使 babel 正常工作的可带参数的命令,是一种打包工具
    • babel-plugin:Babel 转换 ES6+语法或API时需要的插件,比 presets 先执行,且执行顺序是按 plugin 的数组顺序执行
    • babel-preset:一些通用 babel-plugin 的集合,减少 babel-plugin 多个引用,执行顺序是按 preset 的数组顺序倒序执行
    • babel-runtime:把一些 ES5 不支持的 ES6+ API 按需引入,减少代码体积
    • babel-polyfill:把全部 ES5 不支持的 ES6+ API 全量引入,体积较大
  • Babel 配置文件中的执行顺序:
    • 插件比预设先执行
    • 插件执行的顺序是从前往后
    • 预设执行的顺序是从后往前
  • 配置相关的参数说明:
    • targets ,browserslist 目标环境配置,两者的作用相似,都是针对目标浏览器的版本支持
    • useBuiltIns:取值可以是 usage 、entry、false,其中 false 默认支持全部的 polyfill ,剩余两个会根据不同的目标环境配置进行不同程度的 polyfill 替换
    • corejs:取值是2或3,仅在 useBuiltIns 为 entry 或 usage 时有效,作用是使用不同的 corejs 版本
    • modules:这个参数项的取值可以是”amd”、”umd” 、 “systemjs” 、 “commonjs” 、”cjs” 、”auto” 、false。在不设置的时候,取默认值”auto”。该项用来设置是否把ES6的模块化语法改成其它模块化语法
  • Babel 6.x vs Babel 7.x
    • 包名改了,7.x 都是通过 @babel 域空间的包名安装
    • preset 的内容又整合了,babel-node 又拆出来了
    • 对 babel-core 做了一些升级和优化,增加了一些新的支持
    • 减少了一些对 node 低版本的支持,比如 0.x ,1.x 等等
  • 实际应用
    • 根据不同的业务需求,选择不同的版本支持,babel 6.x 和 babel 7.x 不能混用,所以需要按实际情况选择
    • 如果没有特殊需要,减少使用 babel-polyfill,而多使用 babel-runtime
    • 在设置配置项时,如果有明确的业务要求,可以把对应的浏览器兼容范围配置上,这样也可以减少一些代码体积
    • 根据实际情况配置对应的 modules,可以帮助 webpack 等工具进行 tree shaking 优化

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

参考资料

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。