Babel

在此之前或许你已经用过babel，也许听说过什么 babel-loader babel-core、babel-cli、babel-plugin-…、babel-preset-env 反正各种乱七八糟的做项目随便用一一下就可以了，对他只有个一知半解，甚至不知道他到底是干什么的，反正项目要用，照着用就行了，至少博主之前的状态是这样，如果只对他有个一知半解甚至都不了解，那么项目出bug了你都不知道怎么去调试，只能复制–>粘贴–>百度。 基于此，写下自己对Babel的理解。

Babel是什么？

我们在他的官方网站找到这样一句话

Babel is a JavaScript compiler----Babel 是一个 JavaScript 编译器

Babel是一个编译器，针对JavaScript，为什么会有Babel这样一个工具的存在？

本文默认你对es6、es7等有所涉足，我们在写es6+语法的时候是不是很方便，什么promise、async await，可是es6+语法写的虽然很酸爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，在好的语法在好的特性又有什么用？

这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容。 相信到这你已经知道了Babel的概念，并且可以脑补出Babel可以干什么。

下面介绍如何使用Babel编译es6

1、首先安装Node.js

// 在项目下创建初始化 package.json
$ npm init

2、安装 babel

$ npm install babel-cli --save-dev
$ npm install babel-preset-es2015 --save-dev

3、配置 package.json

{
  "name": "es6demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d lib"  //这里配置编译路径： -src 原es6目录  -lib 编译后的es5目录
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.7.5",
    "babel-preset-es2015": "^6.6.0"
  }
}

4、在项目根目录创建 .babelrc 文件，输入以下配置：

// babel es2015
{
   "presets": ["es2015"] 
}

5、src目录下创建您的*.es6文件写es6代码，最后运行编译

$ npm run build

Babel官方文档