一、开发环境实现方案
浏览器不支持es6语法，但是支持低版本的js语法，实现思路就是将高版本的es6语法转换成低版本的js语法，而这个过程需要babel插件支持，我们先来了解一下babel。
二、babel介绍
Babel 是一个 JavaScript 编译器，主要用于将高版本的js代码转换为向后兼容的js语法。举个如下转换的例子：
//转换前
var sum = (num1, num2) => num1 + num2;
//转换后
"use strict";
var sum = function sum(num1, num2) {
return num1 + num2;
};
转换前代码是一个箭头函数，浏览器支持的不是很好，转换后的代码是常见的函数形式，浏览器可以识别。
三、CDN方式搭建es6开发环境
在html中引入babel的CDN文件即可使用，参考如下案例：
<html>
<body>
<div id="output"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const getMessage = () => "Hello World ~~";
document.getElementById('output').innerHTML = getMessage();
</script>
<body>
</html>
以上代码中包含了es6的箭头函数和常量定义等语法，然后将函数的结果输出到页面上，在IE，Chrome等浏览器均能正常运行。
四、node.js方式搭建es6开发环境
注意：这里要求对node.js有一定的了解
1、在开发文件夹下执行npm init -y初始化文件夹
npm init -y //初始化文件夹
2、安装babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
3、新建需要存放待转码的文件夹和文件，例如创建src文件夹和index.js文件
//index.js文件内容
let sum = (num1, num2) => num1 + num2;
4、编译es6代码
//执行编译命令
npx babel src --out-dir lib --presets=@babel/env
5、查看转化后的代码效果如下所示：
"use strict";
var sum = function sum(num1, num2) {
return num1 + num2;
};
五、babel插件和预设的介绍
插件：插件是小型的 JavaScript 程序，只能完成对部分功能的代码进行转换，举个例子如下：
//转换前的代码
let sum = (num1, num2) => num1 + num2
//执行转换的命令
npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
//转换后的效果代码
let sum = function (num1, num2) {
return num1 + num2;
};
可以看到转换后的代码只有一部分es6代码完成了编译，想要完成所有功能完成转换怎么办呢？那就是预设的作用了
预设：是一组预先设定的插件，使用的时候不需要一个接一个地添加所有需要的插件，是插件的功能集合，举个案例说明：
npx babel src --out-dir lib --presets=@babel/env
这里--presets=@babel/env表示代码编译用@babel/env预设，作用是支持所有最新的 JavaScript （ES2015、ES2016 等）特性，用途广泛。效果在前面node开发环境演示。
六、babel配置文件介绍
前面我们编译es6语法的时候，指定babel命令的参数是通过命令行的方式，如果命令参数需要指定的比较多的时候，不够灵活，babel本身支持配置文件的方式配置参数，这也是诸如VUE等各大框架中使用的方式。举例如下：
//在开发文件夹下创建配置文件，名称为.babelrc，内容如下:
{
"presets": [
[
"@babel/env",
{
targets: {
ie: "9",
firefox: "50",
chrome: "47",
safari: "11.1",
},
},
],
]
}
//编译es6语法方式改为：npx babel src --out-dir lib
配置文件中presets表示预设，当前使用的预设是@babel/env，targets表示当前需要支持的浏览器版本
七、简化编译命令
编辑开发文件夹下的package.json文件，在scripts属性中添加一条编译命令如下：
"scripts": {
"build": "npx babel src --out-dir lib --presets=@babel/env"
},
//编译es6的命令简化为如下方式：
npm run build
八、CDN方式搭建es6开发环境补充
引入CDN的方式存在一些隐形的问题，比如说babel文件更新，会和自己以前的代码不兼容。我们这里可以使用babel-standalone的开源npm的babel包达到相同的目标。
1、下载babel-standalone的npm包
npm i babel-standalone
2、把下载下来的npm包下的js代码考到自己的开发文件下，包括babel.js文件和src包目录
3、在页面代码中引入babel.js文件，如下所示：
<html>
<body>
<div id="output"></div>
<script src="./babel.js"></script>
<script type="text/babel">
const getMessage = () => "Hello World ~~";
document.getElementById('output').innerHTML = getMessage();
</script>
<body>
</html>
