前端工程师的自我修养-关于 Babel 那些事儿

本文主要是介绍前端工程师的自我修养-关于 Babel 那些事儿，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这是第 40 篇不掺水的原创，想获取更多原创好文，请扫 👆上方二维码关注我们吧~
本文首发于政采云前端团队博客：前端工程师的自我修养-关于 Babel 那些事儿

前言

随着 Nodejs 的崛起，编译这个昔日在 Java、C++ 等语言中流行的词，在前端也逐渐火了起来，现在一个前端项目在开发过程中没有编译环节，总感觉这个项目是没有灵魂的。说起前端编译就不得不提前端编译界的扛把子 Babel ，大部分前端攻城狮对 Babel 并不陌生，但是在这个 Ctrl+C 和 Ctrl+V 的年代，大多数人对它也只是知道、了解或者听过，少数可能配置过 Babel，但也仅此而已。作为一个有想法和灵魂的前端攻城狮仅仅知道这些是不够的，你需要对 Babel 有一个系统的了解，今天就来聊聊 Babel 那些事儿。

什么是 Babel？

官方的解释 Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前版本和旧版本的浏览器或其他环境中。简单来说 Babel 的工作就是：

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

Babel 的基本原理

原理很简单，核心就是 AST (抽象语法树)。首先将源码转成抽象语法树，然后对语法树进行处理生成新的语法树，最后将新语法树生成新的 JS 代码，整个编译过程可以分为 3 个阶段 parsing (解析)、transforming (转换)、generating (生成)，都是在围绕着 AST 去做文章，话不多说上图：

整个过程很清晰，但是，好多东西都是看着简单，但是实现起来贼复杂，比如这里说到的 AST，要是你觉得你对 AST 已经信手拈来了，老哥麻烦在下面留下联系方式，我要来找你要简历。言归正传，这里提一下，Babel 只负责编译新标准引入的新语法，比如 Arrow function、Class、ES Module 等，它不会编译原生对象新引入的方法和 API，比如 Array.includes，Map，Set 等，这些需要通过 Polyfill 来解决，文章后面会提到。

Babel 的使用

运行 babel 所需的基本环境

1. babel/cli

   npm install i -S @babel/cli

   @babel/cli 是 Babel 提供的内建命令行工具。提到 @babel/cli 这里就不得不提一下 @babel/node ，这哥俩虽然都是命令行工具，但是使用场景不同，babel/cli 是安装在项目中，而 @babel/node 是全局安装。

2. @babel/core

   npm install i -S @babel/core

   安装完 @babel/cli 后就在项目目录下执行babel test.js会报找不到 @babel/core 的错误，因为 @babel/cli 在执行的时候会依赖 @babel/core 提供的生成 AST 相关的方法，所以安装完 @babel/cli 后还需要安装 @babel/core。

   安装完这两个插件后，如果在 Mac 环境下执行会出现 command not found: babel，这是因为 @babel/cli是安装在项目下，而不是全局安装，所以无法直接使用 Babel 命令,需要在 package.json 文件中加上下面这个配置项:

   "scripts": {
      "babel":"babel"
    }
   复制代码

   然后执行 npm run babel ./test.js，顺利生成代码，此时生成的代码并没有被编译，因为 Babel 将原来集成一体的各种编译功能分离出去，独立成插件，要编译文件需要安装对应的插件或者预设，我们经常看见的什么 @babel/preset-stage-0、@babel/preset-stage-1，@babel/preset-env 等就是干这些活的。那这些插件和预设怎么用呢？下面就要说到 Babel 的配置文件了，这些插件需要在配置文件中交代清楚，不然 Babel 也不知道你要用哪些插件和预设。

安装完基本的包后，就是配置 Babel 配置文件，Babel 的配置文件有四种形式：

1. babel.config.js

   在项目的根目录（package.json 文件所在目录）下创建一个名为 babel.config.js 的文件，并输入如下内容。

   module.exports = function (api) {
    api.cache(true);
    const presets = [ ... ];
    const plugins = [ ... ];
    return {
      presets,
      plugins
    };
   }
   复制代码

   具体 babel.config.js 配置

2. .babelrc

   在你的项目中创建名为 .babelrc 的文件

   {
    "presets": [...],
    "plugins": [...]
   }
   复制代码