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