跳到主要内容位置

如何配置 Babel 来体验最新 JavaScript 特性

张旭乾

因为各个浏览器厂商对 JavaScript 规范的实现并不统一,这让开发者在日常开发中经常遇到兼容性的挑战,一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用,这样还需要针对各个浏览器编写不同的代码,才能让代码能够兼容。

后来,一些工具出现了,它们可以让我们编写有最新特性的 JavaScript 代码,然后把代码转换为各个浏览器都支持的版本,这种工具叫作转译器(Transpiler)。Babel 就是其中一个且比较著名,几乎每个前端框架中都使用到了,它可以把包含新特性的代码转换为 ES2015 版本,或者其它指定的版本来实现最大兼容性。

Ecmascript 每年都会发布一个新的版本,它有 TC39 组织来专门负责审阅提案,把合适的提案作为最终 JavaScript 新特性添加到新的 Ecmasciprt 版本中,可以通过 Github 链接来查看每个版本的提案,这些提案中包含了各个新特性的描述,以及对应的代码示例。

为了保持竞争力,我们需要不断的学习这些新特性,但是在提案完成之前,浏览器一般不会实现这些特性,那么要怎么提前进行学习和使用呢?

这个时候,可以利用 Babel 和它相关的插件,来把最新的特性转换为较旧的代码,来让浏览器支持运行,这里以 decorator (装饰器)特性为例,看看如何配置 babel 来测试 decorator 特性。这个教程主要以 Babel 的配置为主,不关注 decorator 详情,后期再发布相关的文章。

安装 Babel 依赖

要开始使用 babel,需要安装相关的依赖,先创建一个 node.js 工程,在一个合适的目录下,运行:

yarn init -y
# 或 npm
npm init -y

初始化一个 Node.js 工程并创建 package.json 文件,然后安装 Babel 依赖:


yarn add -D @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators

这几个依赖的作用分别是:

  • @babel/core。Babel 的核心依赖。
  • @babel/cli。Babel 的命令行工具,可以让我们在命令行中转译代码。
  • @babel/preset-env。Babel 的默认 preset,可以把 JavaScript 代码转译成指定的 Ecmascript 版本。preset 是包含一组 Babel 插件的集成环境。babel 所实现的功能是通过一个一个的插件实现的,使用 preset 可以直接引入一组插件。
  • @babel/plugin-proposal-decorators。Babel 对 Ecmascript Decorator 特性的实现,把它转换为浏览器或 Node.js 支持的代码。

Babel 基本配置

在依赖安装完成之后,需要创建一个 Babel 的配置文件,来告诉 babel 该如何转译代码。在项目的根目录下创建一个 babel.config.json 文件,它里边的内容是:

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "14"
}
}
]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false}]
]
}

preset 属性配置了 Babel preset 的一些选项,babel 的 preset 和 plugins 都支持自定义选项,这里就是通过这个配置文件来指定的,在 presets 中:

  • 使用数组来配置多个 preset,这里配置了 @babel/preset-env(或者也可以使用 @babel/env)这个 preset。
  • 如果给 preset 或 plugin 传递配置项,需要把它们定义在数组里,数组的第一个元素是 preset 或 plugin 的名字,第二个元素是一个对象,用于设置配置项。
  • @babel/preset-env 里配置了 targets,把代码转换为 node 14 版本所支持的。如果目标是浏览器,也可以针对各个浏览器配置版本,例如 chromefirefoxsafariie 等。

在 plugins 中,配置了 @babel/plugin-proposal-decorators,它就是负责把 Ecmascript Decorator 特性,转换为浏览器或 Node.js 支持的代码,由于指定了 targets 为 node 14,所以它就会把 decorators 特性转换为 node 14支持的代码。

@babel/plugin-proposal-decorators 也传递了配置对象,decoratorsBeforeExport 是必填项,用于设置 decorators 是否能写在 export 的前边。因为 decorators 特性在提案流程中,会根据用户反馈而发生变化,所以 babel 也会调整配置项,这个配置项的含义的代码示例如下:

// decoratorsBeforeExport: false
export @decorator class MyClass {}

// decoratorsBeforeExport: true
@decorator
export class MyClass {}

测试 decorators 特性

在配置完 Babel 和 decorators 插件后,我们来编写代码来测试一下 decorators 特性。在项目根目录下新建一个 index.js 文件,里边写上 decorators 提案中的示例代码:

@annotation
class MyClass {}

function annotation(target) {
target.annotated = true;
console.log("abc");
}

这里给 MyClass 这个类添加了 @annotation decorator,然后使用同名函数 annoation 实现了它的功能,把 target 的 annotated 属性设置为了 true,target 是 @annotation decorator 的类,接着打印了 "abc" 测试字符串。

接下来运行下面的命令,来转译代码:

npx babel index.js -o dist.js

npx 可以让我们省略 babel 命令的全路径:./node_modules/.bin/babel,在 babel 命令中,后面跟上源代码文件名 index.js,-o 表示把转译后的代码写入到文件中,这里指定为 dist.js 文件。

运行完成之后,打开 dist.js 文件,可以看到有相当长的内容,这里就不展示了,这些代码都是 node.js 版本 14 支持的。我们运行一下 dist.js 文件:

node dist.js

可以看到它能够打印出 "abc",这说明它转译成功了。

小结

Babel 是非常流行的 JavaScript 转译工具,可以帮我们把 JavaScript 最新的特性转译为各个浏览器或 Node.js 所支持的版本,以最大程度的提高代码的兼容性。Babel 提供了一组 preset 和 plugins 来帮助代码的转译,例如可以使用 @babel/plugin-proposal-decorators 来测试 decorators 特性。

使用 Babel 的步骤是:

  • 安装 @babel/core @babel/cli @babel/preset-env 依赖。
  • 添加 babel.config.json 配置文件,配置 targets 和插件。
  • 运行 npx babel 来转译代码。

后面如果想尝试其它 Ecmascript 新特性,那么可以查看 Babel 的插件列表,看看是否已经支持,如果支持就可以引入进来,编写测试代码了。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买