使用webpack+babel构建ES6语法运行环境

Posted 2021-01-02 难凉热血，码梦为生！

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