babel-cli的使用及配置入门

babel,是将 es6 及以上的语法转换为向后兼容语法的编译工具。

该文章以 babel v7.8.0 及以上的版本为示例

开始

babel 所做的工作为如下：

语法转换
通过 polyfill 方式在目标环境中添加缺失的特性
源码转换

基础组件：@babel/core babel 的基础功能，包含了最基础的编译工具

命令行工具：@babel/cli babel 的命令行工具

使用方式:

安装：


> npm i --save @babel/core @babel/cli

其实在安装 cli 时会自动安装 core，这里为了明确依赖，手动安装

//将src目录下的文件全部编译之后输出到dist目录
> npx babel src --out-dir=./dist

上述命令在编译源码过程中不会做任何代码转换，需要配合插件使用。以箭头函数转换插件为例：

首先安装箭头函数转换插件

> npm i --save @babel/plugin-transform-arrow-functions

> npx babel src --out-dir=./dist --plugins=@babel/plugin-transform-arrow-functions

编译效果如下：

编译前

const test2 = () => {};

编译后

const test2 = function () {};

这里只是使用了转换箭头函数的插件，原始代码中的其他 es6 特性没有被转换，所以需要其他更多的插件配合

preset（预设）

所谓的预设，实际指的是一系列 babel 插件的集合，有了 preset 这个功能，我们就可以一次使用多个 babel 插件提供的功能。

@babel/preset-env

该预设包含了大量插件，这些插件提供了几乎所有 es6 主流特性的转换功能。感兴趣的读者可以去 github 查看具体包含了哪些插件。地址：传送门

安装：

> npm i --save @babel/preset-env

使用方式：

> npx babel src --out-dir=./dist --presets=@babel/preset-env

配置

在实际开发过程中，我们可能使用到大量的插件及预设，甚至时自定义的插件，所以命令行工具可能无法完全满足我们的需求，这个时候需要配置文件帮助我们。

在项目根目录下新建配置文件 babel.config.json, 我们将不通过命令行输入使用@babel/preset-env, 写入如下配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "chrome": "40",
          "firefox": "60",
          "safari": "11.1"
        },
        "corejs": "3.6.5"
      }
    ]
  ]
}

在项目开发过程中，预设可能有多个，所以presets为数组，其中每个preset的配置遵从如下格式：


["<preset-name>", { ...config... }]

以上配置生效后，在编译过程中，preset-env这个预设会根据配置中的浏览器版本支持情况加载转换插件。其中corejs配置是为一个polyfill库指定版本的配置，这里指使用3.6.5这个版本。

运行：

> npx babel src --out-dir=./dist

这时的编译，会自动读取配置文件，加载preset

除了preset-env这个预设之外，babel官方还提供了其他预设，如编译react的预设：@babel/preset-react, 编译typescript的预设：@babel/preset-typescript, 全凭开发者自选，甚至是自定义