ES6以及gulp如何将ES6转为ES5

Posted 2021-04-08 敏儿好学前端笔记

ECMAScript 6.0（以下简称ES6）是javascript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6与ECMAScript 2015的关系
媒体里面经常可以看到”ECMAScript 2015“这个词，它与ES6是什么关系呢？

2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，”ES6”这个词的原意，就是指JavaScript语言的下一个版本。

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版，过一段时间再发6.1版，然后是6.2版、6.3版等等。

但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

标准委员会最终决定，标准在每年的6月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的6月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6的第一个版本，就这样在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称ES2015）。2016年6月，小幅修订的《ECMAScript 2016标准》（简称ES2016）如期发布，这个版本可以看作是ES6.1版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017年6月将发布ES2017标准。

因此，ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。本书中提到“ES6”的地方，一般是指ES2015标准，但有时也是泛指“下一代JavaScript语言”

扯得远了，回到正题，如何将ES6转化为浏览器支持的ES5

本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。

如果用其他工具配合 Babel 来做，可以见这里。不知道 Gulp 是什么？请先查看Gulp 入门指南。

1. 安装依赖

安装全局 Gulp

npm install -g gulp

安装项目中使用的 Gulp

npm install --save-dev gulp

安装 Gulp 上 Babel 的插件

npm install --save-dev gulp-babel

安装 Babel 上将 ES6 转换成 ES5 的插件

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

2. Gulp 配置
gulpfile.js 的内容，形如

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src*.js")// ES6 源码存放的路径
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});
如果要生成 Soucemap， 则用 gulp-sourcemaps，形如：

var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

3. Babel 配置
在项目根路径创建文件 .babelrc。内容为

{
  "presets": ["es2015"]}

4. 转换
命令行中执行
gulp

（默认执行的就是default任务）

附： es6转es5语法转码库---------Bebal

        es6转es5API转码库----------babel-polyfill