1、ES6简介
由于ES6无法直接运行在浏览器中，只能通过babel来进行解析转换（编译）成ES5才可以运行在浏览器中，因此我们就需要给ES6搭建相关的环境，才可以开心的写ES6。
目前很多框架都使用了ES6，比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码，让我们可以少写很多代码，当然如果你还了解typescript以及coffeescrpt，那么就更加方便你进行各种开发了。但是问题来了，这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6
2、webpack
webpack是一个前端打包工具，简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件，将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。
3、准备工作
1)、安装nodeJS（安装方法请到官方查看）
2)、使用npm初始化项目
[cc lang=”javascript”]npm init ES6[/cc]
ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息，并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack
4、安装依赖
配置ES6环境，我们需要安装以下几个必须的依赖包
babel-core、babel-loader、babel-preset-es2015、html-webpack-plugin、webpack、webpack-dev-server
其中babel-core、babel-loader、babel-preset-es2015这几个依赖包主要是用于解析ES6并且转换成ES5的，html-webpack-plugin主要是用于webpack运行html，webpack、webpack-dev-server主要是用于搭建本地服务环境，其中webpack-dev-server是用于热更新的（所谓热更新就是当你修改了代码，不用再去刷新浏览器即可实时运行修改后的代码）
运行下面的命令一次性安装所有依赖包
[cc lang=”javascript”]npm install babel-core babel-loader babel-preset-es2015 html-webpack-plugin webpack webpack-dev-server –save-dev[/cc]
5、创建.babelrc文件
在根目录创建一个.babelrc文件，输入如下内容
[cc lang=”javascript”]{
“presets”: [
“es2015”
],
“plugins”: []
}[/cc]
6、创建webpack配置文件webpack.config.js文件
[cc lang=”javascript”]const path = require(‘path’);
const webpack = require(‘webpack’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: path.join(__dirname,’src’),
output: {
filename: “public/main.js” //输出目录及文件名
},
module: {
loaders: [
{ test: /\.js$/,loader: “babel-loader” }
]
},
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
}),
new webpack.HotModuleReplacementPlugin()
],
devtool:’eval-source-map’,
devServer: {
contentBase: “./public”,//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 8011//http端口
}
}[/cc]
这样我们就搭建好了webpack的环境了，下面我们需要配置下运行的scripts命令就大功告成了！
在此我们需要在根目录下创建两个文件夹，一个是src，另一个是public，在src文件夹中新建两个文件，一个是index.js一个是index.html。
7、修改package.json
在package.json中找到scripts:{}，在其中添加如下代码：
[cc lang=”javascript”]”start”: “webpack”,
“server”: “webpack-dev-server –open”,
“build”: “webpack-dev-server –devtool eval –progress –colors –hot –content-base build”[/cc]
如果需要直接build出一个main.js直接运行npm run build
如果想要直接在浏览器中查看效果直接运行npm run server
8、编写一段ES6的代码看看效果
打开src目录下的index.js文件输入以下代码：
[cc lang=”javascript”]let data = {
id: 1,
name: ‘张三’,
sex: ‘女’,
addr: ‘深圳南山’
}
let { id, sex, addr} = data
document.getElementById(‘people’).innerText = `${id}, ${sex}, ${addr}`;[/cc]
在index.html中增加一个div
直接运行npm run server如果没有任何错误的话，即可看到浏览器中显示了 1, 女, 深圳南山