十五分钟的Babel入门指南

什么是Babel

Babel是将ES6以及以上版本的代码转换为ES5代码的工具，用于适应低版本浏览器。简单来说，功能有以下三个：

• 语法转换
• 通过Polyfiil的方式在目标环境中添加缺失的特性(通过 @babel/polyfill 模块)
• JS源码转换

使用基本环境安装

npm install --save-dev @babel/core @babel/cli

@babel/core

包含了babel的核心功能。

@babel/cli

帮助我们在终端使用babel命令的工具。

配置babel

一般使用babel.config.js或者.babelrc文件作为配置文件。

其中，主要的两个属性有：

• plugins（插件）：用于转换我们的代码。
• presets（预设）：组合插件包，方便使用。

关于plugins

以.babelrc为例：

{
   
    "plugins":["transform-decorators-legacy", "transform-class-properties"],
    "presets":[]
}

可以直接在数组中加入插件的名称，babel会检查他是否被安装到node_module目录下。

也可以指定插件的相对或绝对路径。

---

如果插件前缀为babel-plugin-，可以使用简称：

{
   
    // 实际上是同一个插件
    "plugins": ["myPlugin","babel-plugin-myPlugin"]
}

{
   
    // 冠名插件也同样适用
    "plugins": ["@org/babel-plugin-name","@org/name"]
}

---

插件的执行顺序有两点：

• 插件在presets之前运行。
• 插件是从左到右执行。

{
   
    "plugins":["transform-decorators-legacy", "transform-class-properties"],
}

先执行transform-decorators-legacy，后执行transform-class-properties。

---

插件可以进行传参，参数对象与插件名字共同组成一个数组。

{
   
  "plugins": [
    [
      "transform-async-to-module-method",
      {
   
        "module":