需求分析：

• 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發生錯誤時，程序掛掉的問題