ES6我就不介绍了，直接开始搭建环境~
我是用webstorm的
1.新建一个空白的项目ES6Demo，和以下文件夹
src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
2.index.html(注意引入的是./dist下的js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./dist/index.js"></script>
</head>
<body>
hello es6
</body>
</html>3.src下的index.js
/**
* Created by barry on 2019-2-19.
*/
let a = 1;
console.log(a);4.初始化项目
控制台输入 npm init -y ,回车生成package.json文件如下
{
"name": "ES6Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5.全局安装bable.cli，如果比较慢，可以使用cnpm，这里不多讲了
npm install -g babel-cli6.本地安装babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli这时，package.json发生了变化，自己对比一下
{
"name": "ES6Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
同时，多了一个package-lock.json文件
7.在项目下新建.babelrc文件
添加代码如下：
{
"presets":[
"es2015"
],
"plugins":[]
}8.这时，可以开始将es6代码编译为es5代码了，命令窗口输入
babel E01/src/index.js -o E01/dist/index.js然后可以看到dist文件夹下多了个index.js如下：
"use strict";
/**
* Created by barry on 2019-2-19.
*/
var a = 1;
console.log(a);
使用浏览器打开index.html，控制台输出1，OK ~