《前端之路》之 Babel 下一代 JavaScript 语法编译器

写本章的内容的出发点主要是 为了对于以前关于 JS 版本的一个总结，在以前的开发中，咱们始终对于 ECMAScript 的版本的更新不够重视，以致于在后面的 开发过程当中，咱们始终会被各类新奇的语法打断了咱们的思考思路，因此对于基础的追求，是任什么时候候都不能忘记的。否则会的框架再多，会玩儿的花样再多，到头来都只是API 。

另外 一个目的就是想作一个好玩的东西，就是 实时编译所写的高版本（ES2015+）的 JS 代码。转化成如今大部分浏览器能够兼容的 ES5 、 ES3 等。

下面就正式介绍下 Babel （v7.0.0 ）

1、什么是 Babel

Babel 是一个 JavaScript 编译器，Babel 经过语法变换器支持最新版本的 JavaScript。

1-1 使用方法：

Babel 工具链中有不少工具可让你轻松使用 Babel，不管你是“终端用户”仍是构建中集成 Babel。本文是快速使用这些工具的指南，你能够在文档的“用法”部分中阅读有关它们的更多信息。

1-1-1 ： CLI 用法

这里介绍到的 cli 的用法其实对于大部分同窗来讲不是常规用法。
由于这种用法每每出如今 各类 npm 的包、cli 构建工具集成当中，因此这里，咱们只介绍下它的核心用法。

下载核心包  @babel/core

npm install --save-dev @babel/core

你能够直接在 JavaScript 中 require 它并像下面这样使用它

const babel = require("@babel/core");

babel.transform("code", optionsObject);

做为终端用户，你可能但愿安装其余工具做为 @babel/core 的接口，并能很好地集成在你的开发过程当中。即使如此，你仍可能须要查看其文档页面以了解这些选项，其中大部分选项也能够经过其余工具进行设置。

1-1-2 ：Plugins & Presets 用法

以插件 和 预处理 的方式，是咱们在开发过程当中更为常见的方式。
一般咱们在 Vue 项目开发中使用的是 Plugins 的方式
在 React 项目开发中使用的是 Presets 的方式 下面的文章中，咱们分别来介绍 如何来使用。

1-1-3 ：Polyfill

@babel/polyfill 模块包括 core-js 和自定义 regenerator runtime 来模拟完整的 ES2015+ 环境。
利用 Polyfill 更多的是来解决一个 浏览器的兼容 高版本的 ES 问题。可是每每由于这个包比较的大，因此仍是慎重使用。

2、 React、Vue 结合 Babel

如何在 React、Vue 项目中结合Webpack 使用 Babel

2-1 、React && Babel

上文中有介绍到 babel 配合 React 等使用方法。--- Presets。
预处理方案。

2-1-1: 如何使用

咱们配置完 webpack 和 React ，并启动 server。
这个时候咱们看下咱们 react 的代码

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <div>
      <h2>hhhh</h2>
    </div>
  );
};
ReactDom.render(<App />, document.getElementById("apps"));

这是一个最简单的 react 的 demo 代码展现：

结果咱们发现，咱们的终端 上显示 ERROR:

ERROR in ./src/index.js 6:4
Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const App = () => {
|   return (
>     <div>
|       <h2>hhhh</h2>
|     </div>
 @ multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src main[2]

TIPS: 这个时候大多数人看到这个 error 的时候其实都是懵逼的，特别对于新手到讲，而后一部分机智的小伙子发现 已经超过了本身的 知识范围了，就去 谷歌、百度去寻求帮助

不出意外，搜索引擎统一给出的答案就是 未配置 babel 的预处理，致使 webpack 没法读懂这个代码是什么意思。

这个时候，咱们来试着配置下咱们的 babel 的 presets. 可是如何配置呢？
上文中，咱们只是简单的介绍了下，可是实际配置的文件应该是什么样子呢？

2-1-1-1 babel 配置的第一种配置方式：

根目录建立 babel.config.js 文件。

module.exports = function() {
  const presets = [];
  const plugins = [];
  return {
    presets,
    plugins
  };
};

babel.config.js 的官方文档在这里 babel

2-1-1-2 babel 配置的第二种配置方式：

根目录建立 .babelrc 文件 ( JSON 格式)。

{
    "presets": [],
    "plugins": [],
    "env": {}
}

2-1-1-3 两种配置方式的方式都是大同小异 主要是配置的内容

下一个小节咱们就详细介绍下 babel的plugins和presets解析

2-1-2: babel的plugins和presets解析

2-1-2-1：明确 ES201x 和 ESx 的关系

ES2015 =》 ES6
ES2016 =》 ES7
ES2017 =》 ES8

在 2015 年以前 ES3 是主流。

2-1-2-2：plugin

: babel的插件，在6.x版本以后babel必须要配合插件来进行工做

{
  "plugins": ["transform-es2015-arrow-functions"]
}

顾名思义， 这个插件就是为了编译 es6 的箭头函数

2-1-2-3：preset

: babel插件集合的预设，包含某一部分的插件plugin

{
  "presets": ["es2015"]
}

这里着重解释下 presets 中 es2015 是什么意思？

es2015 => babel-preset-es2015 (能够将 es6 的 JS 代码编译为 es5)
es2016 => babel-preset-es2016 (能够将 es7 的 JS 代码编译为 es6)
es2017 => babel-preset-es2017 (能够将 es8 的 JS 代码编译为 es7)
stage-x => babel-preset-stage-x (能够将处于某一阶段的js语法编译为正式版本的js代码)

这里再介绍下 stage-x， 提案共分为五个阶段：

• stage-0: 稻草人-只是一个大胆的想法
• stage-1: 提案-初步尝试
• stage-2: 初稿-完成初步规范
• stage-3: 候选-完成规范和浏览器初步实现
• stage-4: 完成-将被添加到下一年发布

2-1-2-4：preset env

当前 babel 推荐使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范围更广，包含es2015 es2016 es2017的全部语法编译，而且它能够根据项目运行平台的支持状况自行选择编译版本。

使用方法：

{
  "presets": ["env", "stage-2"]
}

2-1-2-5： 插件中每一个访问者都有排序问题

这意味着若是两次转译都访问相同的”程序”节点，则转译将按照 plugin 或 preset 的规则进行排序而后执行。

• Plugin 会运行在 Preset 以前。
• Plugin 会从第一个开始顺序执行。ordering is first to last.
• Preset 的顺序则恰好相反(从最后一个逆序执行)。

2-1-2-6: 总结：

上面项目的跑起来的时候依然仍是还有bug，下面就须要咱们来完善这一个问题，用上面学习到的内容

{
  "presets": ["env", "stage-1", "react"],
  "plugins": [
    ["transform-runtime", { "polyfill": false }],
    "transform-decorators-legacy"
  ]
}

每一部分的 插件也好，预处理文件也好。都会影响着整个项目，不少时候均为 各个不一样版本插件之间的兼容性问题，搞的很是头痛，因此，看准插件，仔细阅读其文档是不可或缺的。

2-2 、Vue && Babel

Vue 的话，由于有 vue-cli 的存在，已经讲 .babelrc 文件已经给用户配置好了

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

3、Babel 使用 总结

Babel 的使用，是咱们对于 ES 的各类版本 的理解更好的帮助，在咱们实际的项目使用中也提供了 更多了可能。 在结合 webpack 使用的时候，presets、plugins 的配置。tips： 配置中 各个版本之间的兼容问题得异常注意。 好了，关于 babel 相关的 介绍和理解就到这里，若是还有什么疑惑🤔，欢迎来撩👏

---

关于 Babel 下一代 JavaScript 语法编译器 的文章就介绍到这里了，欢迎一块儿来论道～

GitHub 地址：（欢迎 star 、欢迎推荐 : )

Babel 下一代 JavaScript 语法编译器