1.前言
由于ES6语法在各个浏览器上支持的情况各不相同，有的浏览器对ES6语法支持度较高，而有的浏览器支持较低，所以为了能够兼容大多数浏览器，我们在使用ES6语法时需要使用babel编译器将代码中的ES6语法编译为ES5语法，下面就开始搭建一个基于webpack+babel的ES6语法运行环境。
2.需要安装的包
搭建环境之前我们需要安装以下JS包：
- webpack(安装webpack，必装)
- babel-loader和babel-core(babel转码器，必装)
- babel-preset-es2015(转码规则，以es2015规则转码，必装)
- webpack-dev-server(浏览器热更新使用，选装)
可以使用下面一条命令快速安装：
cnpm install babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev
3.新建项目
安装完上述所需要的包之后，我们就可以新建代码项目来写代码了，以如下目录结构为例：
D:\ES6-ENV
│ ?.babelrc
│ ?index.html
│ ?package.json
│ ?webpack.config.js
├─dist
├─node_modules
└─src
└─ main.js
目录结构说明
1.ES6-ENV: 项目文件夹
2..babelrc:babel的配置文件
3.index.html:访问的页面
4.webpack.config.js:webpack配置文件
5.dist:webpack打包后的输出文件
6.src/main.js:编写es6代码文件
3.1 babel配置文件.babel
{ "presets":[ "es2015" ], "plugins":[]}3.2 webpack配置文件webpack.config.js
var path = require(‘path‘);module.exports = { //入口文件 entry:‘./src/main.js‘, //出口文件 output:{
filename:‘bundle.js‘, //出口文件名 path: path.resolve(__dirname,‘dist‘) //出口文件路径 }, module:{ rules:[ { test:/\.js$/, use:[ { loader:‘babel-loader‘ } ], exclude: [ //排除的不转换node_modules下面的.js文件 path.resolve(__dirname, ‘node_modules‘) ] } ] }}3.3 package.json
{ "name": "es6-env", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --port 8080 --inline --hot --open" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.0" }}4.打码
配置好以上环境后，我们就可以在src/main.js文件中疯狂的打码啦，此时所编写的ES6语法在项目运行后就能被正确的编译成ES5语法啦！！！
在命令行输入以下命令即可运行写好的代码：
npm run dev
使用webpack+babel构建ES6语法运行环境
原文地址：https://www.cnblogs.com/wangjiachen666/p/9461835.html