Babel

一、Babel 是什么

1. 认识 Babel

• Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码。
• 官网：Babel · The compiler for next generation JavaScript
• 在线编译：Babel · The compiler for next generation JavaScript

2. 使用 Babel 的在线编译

• 使用Babel在线编译为es2015。

3. 解释编译结果

• Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类。
• 但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块。
• Babel 一般需要配合 Webpack 来编译模块语法。

二、使用 Babel 前的准备工作

1. 什么是 Node.js 和 npm

• Node.js 是个平台或者工具，对应浏览器。

• npm：node 包管理工具。

2. 安装 Node.js

• 官网：Node.js。
• 各种版本的下载地址：Index of /dist/。
• 安装完成后，可以在命令行工具中检查Node.js 与 npm 的版本。

三、Babel 的使用方式

• Babel 的使用方式有很多种可以通过官网的Setup页面进行查看。
• 一般在命令行工具（ CLI ）或 Webpack 中使用 Babel。

四、在命令行工具中使用 Babel 编译 ES6 代码 

        第一步：选择在命令行工具中使用 Babel

        第二步：根据文档提示，在本地安装 Babel CLI

1. 查看项目文件夹中是否有 package.json 文件，若没有通过 npm init 初始化项目进行创建。

•  ① 在项目文件夹中打开命令行工具。

• ② 输入：npm init ，根据提示的信息可以修改name，其他信息可以不修改直接回车后即可。

• ③ 命令执行完成后会在该文件夹中生成 package.json 文件，内容如下：

2. 项目初始化完成后，根据文档继续安装 Babel 需要的包。

• 不添加版本号默认安装最新的版本。

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

• 使用@+版本号，可以指定包的安装版本。

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

• ① 这里我们使用 npm install --save-dev @babel/core @babel/cli 命令安装最新版本。

• ② 安装完成后，package.json文件中会多出相关的依赖。

        第三步：添加编译的命令

1. 在 package.json 文件的 "scripts" 中添加执行 babel 的命令："build": "babel src -d lib"。

• "babel src -d dist" 完整写法是 "babel src --out-dir dist"。
• 其中src代表原始文件夹（需要提前创建），dist代表编译后保存的文件夹（不需要提前创建会自动生成）。

2. 现在可以在终端中运行： npm run build  ，这里只是测试该命令是否能够执行，想要完成编译还需要添加一个Babel包。

        第四步：创建 babel.config.json 配置文件

1. 安装@babel/preset-env，命令为：npm install @babel/preset-env --save-dev 。

2. 创建 babel.config.json 配置文件，并添加：{ "presets": ["@babel/preset-env"] }  。

3. 最后再次执行编译命令 ： npm run build  。

4. 编译后的结果。