简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。
ES6转ES5（第一种）
初始化项目
1npm init --y 2
安装依赖
1npm install babel-cli -D 2
1npm install babel-preset-es2015 -D 2
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。
1// src/index.js 2let a = 1; 3 4let fun = ()=>{ 5 console.log(a); 6} 7
编辑package.json
我们需要自己在scripts字段里添加命令：
-
build-t：单独编译某个文件 -
build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建） -
build-o：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建，可以指定文件名）
1{ 2 "name": "babel01", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build-t":"babel index.js --presets es2015", 8 "build-d": "babel src -d lib --presets es2015", 9 "build-o":"babel src/index.js -o dist/index.js --presets es2015" 10 }, 11 "keywords": [], 12 "author": "", 13 "license": "ISC", 14 "devDependencies": { 15 "babel-cli": "^6.26.0", 16 "babel-preset-es2015": "^6.24.1" 17 } 18} 19
启动编译
1npm run <这里是scripts字段的命令> 2
下面是编译后的es5文件。
1"use strict"; 2 3var a = 1; 4 5var fun = function fun() { 6 console.log(a); 7}; 8
ES6转ES5（第二种）
其实跟第一种差不多。
初始化项目
1npm init --y 2
安装依赖
1npm install babel-cli -D 2
1`npm install babel-preset-es2015 -D 2`
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。
1// src/index.js 2let a = 1; 3 4let fun = ()=>{ 5 console.log(a); 6} 7
在项目中创建并编辑.babelrc文件
在根目录下创建.babelrc文件。
1{ 2 "presets": ["es2015"], 3 "plugins": [] 4} 5
编辑package.json
我们需要自己在scripts字段里添加命令，命令内容与第一种方法的一样，这里只不过省了--presets es2015。
1{ 2 "name": "babel01", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build":"babel src/index.js -o dist/index.js" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "babel-cli": "^6.26.0", 14 "babel-preset-es2015": "^6.24.1" 15 } 16} 17
启动编译
1npm run build 2
下面是编译后的es5文件。
1"use strict"; 2 3var a = 1; 4 5var fun = function fun() { 6 console.log(a); 7};
ES6+转ES5
这里 ES6+ 说的是ES6、ES7、ES8等。
初始化项目
1npm init --y 2
安装依赖
1npm install babel-cli -D 2
npm install babel-preset-env -D
1 2##### 在项目中创建并编辑ES6文件 3 4这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名`index.js`，放在项目根目录的src文件夹里。 5
// src/index.js
let a = 1;
let fun = ()=>{
console.log(a);
}
1 2##### 在项目中创建并编辑.babelrc文件 3 4在根目录下创建`.babelrc`文件。 5
{
"presets": ["env"]
}
1 2##### 编辑package.json 3 4命令内容不只是这一个，根据你需求写，其他命令可以看上面的**ES6转ES5（第一种）**。 5
{
"name": "babel01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src -d dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
1 2##### 启动编译 3
npm run build
1 2下面是编译后的es5文件。 3
"use strict";
var a = 1;
var fun = function fun() {
console.log(a);
};
1 2结语 3-- 4 5本篇主要介绍了ES6转ES5的两种方法以及ES6+怎样转ES5。不过现在大部分使用ES6+怎样转ES5比较多，主要让大家体验下升级的感觉。如果觉得不错，麻烦关注下俺的公众号哦，会不定时发放前端电子书以及学习进阶视频。 6 7* * * 8 9> 作者：**Vam的金豆之路** 10> 11> 主要领域：**前端开发** 12> 13> 我的微信：**maomin9761** 14> 15> 微信公众号：**前端历劫之路** 16> 17>  18 19* * * 20 21 22本文转转自微信公众号**前端历劫之路**原创[https://mp.weixin.qq.com/s/Hp_J6RkrwKuYBpHcIjBcLA](https://mp.weixin.qq.com/s/Hp_J6RkrwKuYBpHcIjBcLA)，如有侵权，请联系删除。