更多文章可關注我的個人博客：https://seven777777.github.io/myblog/
前言
ES6給我們帶來便利的同時，也給我們帶來了一下麻煩。當然自從chrome等瀏覽器對於ES6語法的全面支持以來，這種麻煩也已經降到了最低，如果你的項目完全不需要考慮兼容問題，現在你在項目中可以盡情的使用ES6，且不用做特殊處理。當然這是理想情況。
前幾年我主要做的都是H5方面的開發，所以對於瀏覽器的兼容問題關注也不是很多。近兩年的開發也都是基於VUE框架，對於vue,如果需要使用ES6並且需要兼容一些低版本的瀏覽器，比如萬惡的ie，我們可以安裝babel-polyfill是代碼正常運行。方法很簡單：
- 首先install
babel-polyfill到你的項目中:
<!--安裝-->
npm install babel-polyfill --save-dev
- 其次在你的代碼頭部加載
babel-polyfill（注意：要在代碼前，第一個js文件的頂部）
<!--使用：vue項目的話就是在main.js的頭部-->
import 'babel-polyfill';
// 或者
require('babel-polyfill');
正文
前段時間寫了一個項目，由於各種原因，最終選擇了較老的開發方式：jquery+php，由於我寫sass寫習慣了，不想寫css，所以我又引入了gulp進行了簡單的配置。
最近突然得知該項目要進行對ie的兼容，於是乎趕緊用IE打開項目，悲傷的發現整個項目都崩掉了。
排查了許久，一開始我以爲是我使用的一些第三方庫導致的不兼容，後來發現根本原因在於我項目中的js幾乎全部使用的ES6語法。遂研究了一下解決方法：
gulp+babel將ES6轉ES5。
總結一下gulp環境引入babel的方法：
- 首先，相關依賴的安裝（gulp的安裝我就不說了）
// 安裝依賴
npm install gulp-babel --save-dev
npm install babel-core --save-dev
npm install @babel/preset-env --save-dev
//本來我查資料應該是隻要以上三個依賴，但是最終運行時會報缺少@babel/core的錯，所以再安裝下面這個
npm install @babel/core --save-dev
// 下面這個依賴用於js代碼的壓縮(可選)
npm install gulp-uglify --save-dev
// 用來重命名（可選）
npm install gulp-rename --save-dev
- 新建一個gulp任務
如果你的項目已引入gulp，直接在gulpfile.js文件中增加即可，如果沒有，就新建一個gulpfile.js的文件，然後加入下面代碼
// gulpfile.js
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
//創建一個名爲js的任務(名字可以任意取)
gulp.task('js', function(){
// 首先取得你需要轉譯的js，此處以'js/common.js'爲例
// 也可多選，具體看實際情況配置
// **/表示包含所有子文件夾
// *.js 表示所有後綴是js的文件
return gulp.src('js/common.js')
//將ES6代碼轉譯爲可執行的JS代碼
.pipe(babel())
//js壓縮
.pipe(uglify())
//重命名爲common.min.js
.pipe(rename('common.min.js'))
//輸出文件夾：此處設置的當前文件夾，也可根據實際情況設置
.pipe(gulp.dest('js'))
})
// 配置默認命令執行任務
gulp.task('default',gulp.parallel('js','其他任務'));
- 配置babelrc
新建文件：.babelrc
//.babelrc
{
"presets": [ "@babel/preset-env"]
}
以上代碼配置完成後，在git命令行工具中執行gulp，執行完成，你會發現js文件夾下多了一個common.min.js文件，在需要使用的地方引用該文件，然後就ok拉~
尾
最後還是想吐槽一句，ie真的是太噁心了，爲什麼現在還會有網站需要兼容ie，心累！
