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

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

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

一、什么是 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 问题。但是往往因为这个包比较的大，所以还是慎重使用。

二、 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</
                        
关键字：