一、es6简介

es6（ECMAScript）是JavaScript语言的下一代版本，已于2015年6月正式发布。它的目的是使JavaScript语言可以用于编写复杂的大型应用程序，成为企业极开发语言。

1.1 ECMAScript与JavaScript

1996年11月，JavaScript的创造者Netscape（网景）公司决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年ECMA发布了232号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标椎，并将其命名为ECMAScript，这个版本就是1.0版。

之所以没有命名为JavaScript，主要以下两个原因。一是商标，Java是Sun的注册商标，根据授权协议，只有Netscape可以合法使用JavaScript这个名字，而且JavaScript本身已经被NetScape注册为商标。而是想体现这个语言的的制定者是ECMA而不是Netscape,这样有利于保证这门语言的开放性与中立性。

2.2 ES6与ECMA2015

2011年，ECMAScript5.1发布之后，6.0版本便开始制定了。因此ES6这个词原意就是指，JavaScript的下一代版本。

ECMA制定者在每年6月份正式发布一次标准，作为当年的正式版本。2015年，ECMA发布的第一个版本，正式名称是《ECMAScript2015版本》。因此ES6既是一个历史名词，也是一个泛指，含义是5.1版本之后的JavaScript版本，涵盖了ES2015、ES2016、ES2017等，而ES2015则是正式名称，特指当年发布的正式版本。

二、浏览器支持

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。
Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。

浏览器支持的详细的内容可以参考：https://www.runoob.com/w3cnote/es6-setup.html

三、Babel简介

Babel是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

3.1 配置文件.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步就是配置这个文件。
该文件用来设置转码规则和插件，基本格式为：

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

presets设定了转码规则，最新的转码规则为：

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# react 转码规则
$ npm install --save-dev @babel/preset-react

在当前项目下安装这两个依赖包，然后在.babelrc文件中添加这些规则：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
 }

Note：要向使用所有babel工具和模块，都必须先写好.babelrc。presets规则寻址为当前项目下的node_module下的依赖包，不会在全局中查找。若没有在项目中安装，会报错。

3.2 命令行转码工具Babel-cli

Babel提供了babel-cli工具，用于命令行转码。安装命令如下：

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

Note：如果您没有package.json，请在安装前创建一个。这将确保与npx命令正确交互。

基本用法如下：

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成source map文件
$ npx babel src -d lib -s

# 每次改变问价时自动编译，使用--watch或-w
$ npx babel src --out-dir lib --watch

更多命令查看 https://www.babeljs.cn/docs/babel-cli

上面的代码是在全局环境下进行Babel转码。这意味着，如果项目要运行必须全局环境下必须有babel。也就是说项目对环境产生了依赖。另一方面，这样做也无法支持不同项目下使用不同的babel。
一种解决方式是将babel-cli安装到项目当中。

  $ npm install --save-dev @babel-cli

然后，改写package.json。

{
  "name": "test01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx babel src --out-dir lib --watch "
  },
  "author": "ZhangRun",
  "license": "ISC"
}

转码的时候以下命令：

$ npm run build

参考链接：
阮一峰老师的ECMAScript入门教程
Babel中文文档
菜鸟教程

ES6简介与Babel配置