chuanFE

ES6转ES5小记

ES6解决了ES5的好多坑,项目中也用了很多ES6语法,就是有些语法浏览器不支持。所以想用ES6只能转,我项目用的gulp构建,所以首先就想到用gulp实现自动将ES6转成ES5,转换的过程通过babel来实现,gulp负责实时监听代码变化并调用babel完成转换任务,于是有了下面的一个方案:

gulp + babel 编译

1. 安装gulp, gulp-babel, babel-core, babel-preset-es2015,

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

2. 配置gulp,在根目录下新建gulpfile.js文件

1
2
3
4
5
6
7
8
9
10
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("js**/*.js")// ES6 源码存放的路径
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});

ES6例子:

1
2
let arr = [{a:1,b:2},{a:3,b:2}]
let targetItem = arr.find((item) => item.a == 1)

转换后的es5:

1
2
3
4
var arr = [{ a: 1, b: 2 }, { a: 3, b: 2 }];
var targetItem = arr.find(function (item) {
return item.a == 1;
});

至此,已经能实现项目中大部分ES6转成ES5的需求,但是还有一些新的api,babel是不转换的,细心的你肯定已经发现,上述例子中babel只是转换了let和箭头函数,并没有转换ES6为Array新增的find()函数,类似这样的api还有很多,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。如果想让这些没转换的方法运行,需要使用babel-polyfill,为当前环境提供一个垫片。polyfill相当于用来实现浏览器不支持原生功能的代码

3. babel-polyfill扩展新的API

安装命令:

1
$ npm install --save babel-polyfill

然后,在脚本头部引入

1
2
3
import 'babel-polyfill';
// 或者
require('babel-polyfill');

这样在项目中就可以愉快的书写ES6代码了,由于babel-polyfill并不是真正意义上将ES6转换成ES5,引入的体积也比较庞大,所以不推荐用polyfill,正常到第2步就可以了。

我知道是不会有人点的,但万一有人想不开呢?