当前位置: 首页 > news >正文

Babel 手记

Babel 是一个转译器,将 ES6+ 的语法转译成浏览器支持更好的 ES3/ES5 语法的代码。它的运行有三个阶段:

parse(解析)=> transforming(转码)=> printing(输出)

不经过配置的 Babel 实质上什么都不会做,解析你的代码,转码后输出相同的代码。只有通过增加 plugin(插件)来告诉 babel 应该如何转译代码。而我们熟悉的 preset(预设),只是一系列 plugin 的集合,免去了一个个的配置插件这个步骤。

Babel 的 git 仓库是一个 monorepo,其中包含 babel 的模块、helper,以及 plugin。

babel 模块

简要介绍 babel 中几个模块的作用。

babel-parser

babel 中使用的解析器。默认支持解析:

  1. 最新的 ECMAScript 语法
  2. 附加注释
  3. JSX, Flow, Typescript 语法
  4. 实验阶段的语法提案(支持至少达到 stage-0 阶段的 PR)

babel-core

babel 的核心模块,核心 api 都在这个模块里实现,比如,将字符串转译得到 AST 的方法 babel.transform,其它的 api 如 babel.transformFile, babel.transformFileSync, babel.transformFromAst,从这些 api 的命名大概能猜到它们的作用。

babel-cli

babel 的命令行工具,支持通过命令行对文件进行转译。

babel-node

会随 babel-cli 一起安装,安装后在命令行输入 babel-node,会启动一个 REPL ,还可以通过 babel-node 命令执行 js 文件,和 node 命令类似。

babel-register

引入该模块后,会给 noderequire 函数绑定一个钩子,当使用 node 的 require 方法时,会自动转译 .es6, .es, jsx, .mjs, .js 格式的文件(除了 node_modules 目录下的文件)。

babel-plugin-*

Babel 默认不会转译代码,需要通过配置插件来增加对语法的转译能力(注:可以通过配置 preset 来启用一系列插件)。 Babel 的插件分为两类,一类是 Transform Plugins,直译就是“转译插件”,这些插件会转译代码;另一类是 Syntax Plugins,直译就是“语法插件”,这类插件只做一件事,就是告诉 babel 要对特定类型的代码进行解析。 举例:一些需要被 polyfill 的代码,显然我们需要用到 Transform Plugins 这类插件,来把新的语法转译成兼容性更好的旧语法;而如果我们需要解析 vue 的单文件组件的语法,则首先需要用到 Syntax Plugins 这类插件来告诉 babel 如何解析这类语法。

注:Transform Plugins 会自动启用相应的 Syntax Plugins,不用特地去声明。其次,plugin 插件的引入和引入顺序是相关的,具体可以查看文档的对应章节。

babel-preset-*

文章开始已经提到,preset(预设)只是一系列 plugin 的集合。Babel 的官方仓库中也提供了一些预设,如 babel-preset-env, babel-preset-stage-[0~3] 是对 ECMAScript 最新语法和 api 的支持, babel-preset-flow 是对 flow 语法检查工具的支持, babel-preset-react 是对 react 的支持,以及 babel-preset-typescript 是对 typescript 语法的支持。

babel-helper-*

helper 是一些供 babel 内部使用的工具库。我们常会使用 babel-plugin-external-helpers 插件,把一个文件中重复的 helper 代码(通常是 polyfill 的代码)移到文件顶部。

babel-polyfill

polyfill 直译过来就是“填充工具”,作用简单来说,就是给不支持某些 api 的旧浏览器打补丁,这样一来,开发的时候就可以始终使用新的语法、api,而不用考虑旧浏览器的兼容问题。 Babel 支持对部分新语法进行转译,如箭头函数,class, let, const 关键字等。但对于一些新的内置对象 Promise,全局对象的静态方法 Array.from,内置对象的示例方法 Array.prototype.includes,以及 generator 函数,这些浏览器支持度不全的语法,需要增加一些 polyfill,才能确保代码能在旧的浏览器中正常运行。

注:通常是完整引入,会对全局对象做修改,官方建议在开发应用时使用,会明显增加打包后文件的体积。

babel-runtime

与 babel-polyfill 的作用类似,官方建议在开发库或插件时使用。通常, babel-runtime 会和 babel-plugin-transform-runtime 插件一起使用,达到按需引入 polyfill 的效果。

其它

还有其它几个模块,如 babel-generator, babel-code-frame, babel-template, babel-traverse, babel-types,一般可能很少会和它们打交道,暂时先不讨论。

转载于:https://juejin.im/post/5b7d4e17518825278e272020

相关文章:

  • 【Spring学习笔记-MVC-10】Spring MVC之数据校验
  • 为什么使用MAVEN 3.2.1会有版本问题?
  • ng6--错误信息小结(持续更新)
  • org.tinygroup.context2object-参数对象构建
  • 思考 | 云计算 + 区块链 = ?
  • devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)...
  • Day 33 三剑客-awk
  • HDU 4828 (卡特兰数+逆)
  • python学习-文件处理
  • 四、oracle 用户管理二
  • 3.字典常用功能
  • java多线程下载
  • MySQLdb的安装与使用
  • 谋势、聚力、强生态,用友三十而立
  • linux下svn服务器搭建
  • github指令
  • Hibernate最全面试题
  • k8s 面向应用开发者的基础命令
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • PhantomJS 安装
  • 程序员最讨厌的9句话,你可有补充?
  • 观察者模式实现非直接耦合
  • 机器学习学习笔记一
  • 世界编程语言排行榜2008年06月(ActionScript 挺进20强)
  • Mac 上flink的安装与启动
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • #每天一道面试题# 什么是MySQL的回表查询
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (poj1.3.2)1791(构造法模拟)
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (一)为什么要选择C++
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .NET delegate 委托 、 Event 事件
  • .Net 访问电子邮箱-LumiSoft.Net,好用
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .net 流——流的类型体系简单介绍
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • /usr/bin/python: can't decompress data; zlib not available 的异常处理
  • @RequestMapping用法详解
  • @RequestMapping-占位符映射
  • @serverendpoint注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [20140403]查询是否产生日志
  • [BUUCTF NewStarCTF 2023 公开赛道] week3 crypto/pwn
  • [C++]二叉搜索树
  • [Deep Learning] 神经网络基础
  • [EFI]DELL XPS13 9360电脑 Hackintosh 黑苹果efi引导文件
  • [java面试]宇信易诚 广州分公司 java笔试题目回忆录
  • [JS]JavaScript 简介
  • [Kubernetes]9. K8s ingress讲解借助ingress配置http,https访问k8s集群应用
  • [Latex] \bibitem{} | .bbl 格式参考文献转换与获得