跳到主内容

Babel相关面试题

本文整理了 Babel 相关的面试合集,主要包括 Babel 的工作流程,@babel/preset-env 的 useBuiltIn 属性等问题

Babel 的工作流程

  1. Parse(解析):将源代码通过 babylon 转为抽象语法树 (AST)
  2. Transform(转换):对(抽象语法树)做一些语法转化,例如 ES6 新的特性转为 ES5 等等
  3. Generate(代码生成):将转换后的抽象语法树(AST)通过 babel-generator 生成新的 Javascript 代码

Babel工作流程

@babel/preset-env 的 useBuiltIn 属性

  • entry:需手动引入 import '@babel/polyfill' ,结合 targets 属性的值,对代码进行转换时,会去掉目标浏览器已经支持的 polyfill 模块。不管代码里有没有用到,都会加入目标浏览器不支持的 polyfill 模块。
  • usage:不需要手动引入 @babel/polyfill ,打包时会根据代码使用情况,结合 targets 属性的值,引入相应使用到的 polyfill 模块
  • false:默认值,不做任何处理。

默认使用 @babel/preset-envtargets 属性和 useBuiltIn:'usage' 配置,实现按需引入