gulp构建项目（十三）：babel-polyfill编译es6新增api

需求分析：

• es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法
• gulp-babel只能将es6语法编译成es5，比如：箭头函数、let变量等，但是API不能编译，比如Object.assign
• 引用babel-polyfill编译es6新增api

一、IE浏览器无法识别ES6新增API

这里用的是ie浏览器，chrome是可以识别es6 api的，所以无法调试

二、如何引入babel-polyfill模块

1、webpack如何引入babel-polyfill模块

我们常见的就是：下载babel-polyfill模块、在入口文件顶部引入

//在入口文件顶部引入
require('babel-polyfill') 

// 将babel-polyfill打包进入口文件中
entry: ["babel-polyfill",'./src/app.js']

2、gulp为什么不能这么引入

• webpack会将 require() 的模块自动打包，让浏览器可以识别，但是gulp是没有这个内置加载器的。
• 后续文章将讲述如何加入 require() 的模块支持

3、gulp直接通过script标签引入

// https://cdn.bootcss.com/babel-polyfill/7.0.0-rc.4/polyfill.min.js
<script src="js/polyfill.min.js"></script>

三、引入的polyfill.min.js文件，必须放在main.min.js前面

意思就是必须放在你用过 es6的api 的js文件前面

四、引入的polyfill.min.js文件之后，不再报错

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题