Babel

一、认识Babel

使用Babel官网https://www.babeljs.io/提供的在线编译器;

Babel是什么：

Babel是javaScript的编译器，用来将ES6的代码，转换成ES6之前的代码。

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

Babel一般需要配合Webpack来编译模块语法。

Babel的使用方式

前言

重点：知道如何从官网查找Babel在相应工具上的使用方式。

进入Babel官网https://www.babeljs.io/，点击Setup，以下就是Babel在不同工具中的使用方式说明。我们重点掌握的是CLI(命令行工具)和Webpack中Babel的使用

一个简便的打开命令行的方式：打开文件夹，在文件夹路径处点击，输入cmd,按回车键

 

 1.使用Babel前的准备工作

要使用Babel需用到Node.js,要安装Babel需用到npm，所以我们先来学习：什么是Node.js和npm?

1.1：什么是Node.js和npm?

Node.js是一个平台或者说工具，我们在Node.js这个平台上可以使用一门语言来开发，这门语言实际上是后端JavaScript语言，后端JavaScript = ECMAScript + IO + File + ...等服务器端的操作。很多时候我们把后端JavaScript称为Node.js。

npm是node的包的管理工具，可以认为是Node.js平台的插件的管理工具。我们可以使用nom去安装node的插件。为了方便用户操作包，npm提供了一些命令，可以直接在命令行中操作包

1.2：安装Node.js

打开nodejs的中文官网：https://nodejs.org/zh-cn/，点击下载长期支持版

检测是否安装成功

1.3：初始化项目

使用命令：npm init来初始化项目

 package name:只能用英文名

后面的version/description等可以使用默认值，直接按回车。然后我们可以看到文件里面多了个package.json文件，以后我们使用npm安装的包将会被记录在这里。

如果以后我们换电脑操作，我们只需要拷贝这个文件，就能把需要的包通过npm install(在package.json文件里查看，把之前安装过的包重装一遍)命令安装。

1.4：安装Babel需要的包

在Babel官网找到相对应的安装命令，ctrl+c复制，在命令行点击右键就能粘贴进来。这里以安装CLI需要的包示例：（--save-dev 表示的是开发时依赖，也就是说只会在开发的时候用到）

 以上@后面是包名，如果不指定稳定的版本，会默认下载最新版本，有可能由于用法更改了，导致无法像之前那样使用。所以我们最好安装一个稳定的版本。示例：

 二、使用Babel编译ES6代码

步骤：

1. add a "scripts" field to your package.json

 在package.json中添加 "build": "babel src -d lib"，创建命令build,作用是使用babel编译src目录下的文件输出到lib中。

 此时我们使用 npm run build 命令是不能将src目录下的文件转换成功的，原因是我们还没配置babel。

2.首先要下载一个包：

 To start, you can use the env preset, which enables transforms for ES2015+

3.创建一个.babelrc文件，写以下代码配置: 

 In order to enable the preset you have to define it in your .babelrc file, like this:

 此时我们使用 npm run build，打开lib文件会发现转换成功了。