运行环境

---

• Node.js
• Visual Studio Code

ES6 新特性

---

ES6 是 2015 年推出的，虽然距离现在已过去了七年，但是该版本相对比 ES5 添加了许多新特性，能满足大部分的开发需求，故有很广的运用范围，就跟 Java 中的 JDK8 类似。
ES6的新特性包括：

• 新的定义方式 const、let
• 箭头函数
• 解构赋值
• 模板字符串
• Symbol 数据类型
• 新的数据结构 Set 和 Map
• Promise 异步编程解决方案
• Iterator 迭代器 和 for…of 遍历迭代器
• Class ，面向对象编程
• 模块化编程

…等等

使用 babel 对 ES6 代码转为 ES5

---

项目结构：

|—— dist 存放转码后的结果目录
|
|—— src	存放资源文件
|      |—— demo.js 测试的ES6代码 
|   
|—— .babelrc	 Babel 的配置文件
1
2
3
4
5
6

安装 babel

babel 是转码器，支持将 高版本ECMAScript（简称ES） 的代码转换成 ES5 的代码，ES5 的代码在不同的浏览器上的兼容性比 ES6 的代码好一些，但是性能不如高版本。

第一步，使用 node 的命令安装 babel 脚手架工具

npm install --location=global babel-cli
1

ES6 代码

第二步，编写 ES6 规范的 JS 代码

let a = [1, 2, 3]
m = a.map(item => item + 1)
console.log(m)
1
2
3

配置 babel

Babel 的配置文件名固定为 .babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式为：

{
  "presets": [],
  "plugins": []
}
1
2
3
4

第三步，在presets 字段设定转码规则，设置为 es2015 ，表示 ES6

{
  "presets": ["es2015"],
  "plugins": []
}
1
2
3
4

安装 es2015 转码器

第四步，安装 es2015 的 转码器

npm install --save-dev babel-preset-es2015
1

使用命令进行转码

转码通常有两种情况：1）转码单个文件 2）转码整个目录
转码单个文件

# 创建存放结果的文件夹( 若有则忽略 )
mkdir dist

babel src/demo.js --out-file dist/dmeo_es5.js
# 其中 --out-file 可简写为 -o
1
2
3
4
5

转码整个目录中的JS文件

# 创建存放结果的文件夹( 若有则忽略 )
mkdir dist

babel src --out-dir dist
# 其中--out-dir 可简写为 -d
1
2
3
4
5

转码后的结果：

"use strict";

var a = [1, 2, 3];
m = a.map(function (item) {
  return item + 1;
});
console.log(m);
1
2
3
4
5
6
7