讓瀏覽器兼容ES6語法(gulp+babel)

使用gulp+babel搭建ES6環境 

前言

我們查閱資料可以知道ECMAScript 2015(簡稱ES6)已經於2015年發布，由於用戶使用的瀏覽器版本在安裝的時候可能早於ES6的發布，而到了今天，我們在編程中如果使用了ES6的新特性，瀏覽器又沒有同步更新版本，或者是新版本的瀏覽器沒有對ES6的特性進行兼容，那瀏覽器肯定是無法識別我們所寫的ES6代碼，所以假如想直接編寫ES6代碼在瀏覽器執行，結果由於兼容性問題只能是報錯。那么瀏覽器不支持，而我們又想用ES6語法編寫JS代碼怎么辦，針對這個問題，很多團隊為此開發出了很多語法解析轉換工具，比較通用的工具有babel, jsx, traceur, es6-shim等，它們的作用就是將我們編寫的ES6代碼轉換為瀏覽器識別得了的JS代碼，相當於ES6和瀏覽器之間的翻譯官。

　　

進入正題

在這里默認你已經熟悉了gulp的語法和用法了，不熟悉的童鞋請移步gulp中文網。

創建工程目錄

myProject/
├── app/
│   ├── static/
│   │      └── scripts/
│   │               └─ index.js
│   └── views/
│            └─ index.html
│
└── dist/

 

初始化npm

　　初始化npm，是因為gulp的運行是基於NodeJS的，執行gulp命令也是需要安裝相對應的模塊，所以先用終端進入myProject，然后執行npm init命令，不斷回車使其生成package.json。

 

安裝gulp和編譯ES6所需要的模塊

用終端進入myProject，分別執行：

// 既然要使用gulp自動化工具，當然少不了gulp插件的安裝
1. npm install gulp —save-dev；
// 要想將ES6轉換為可執行的JS代碼，需要babel轉換工具，同時又依賴在gulp環境下運行，所以要安裝gulp-babel插件
2. npm install gulp-babel —save-dev；
// babel-preset-env插件，該插件可以根據配置的目標運行環境自動啟用需要的babel插件(即動態轉換ES6代碼至可執行的JS代碼)
3. npm install babel-preset-env —save-dev;
// 根據babel文檔指引是不需要babel-core的，但是在實際操作中少了babel-core會報找不到該模塊，所以安裝上即可
4. npm install babel-core —save-dev;
//選裝，不是轉譯ES6必備的插件，只是起到壓縮的作用
5. npm install gulp-uglify —save-dev;

上面的五行命令可以縮寫為 npm install gulp gulp-babel babel-preset-env babel-core gulp-uglify  —save-dev 一行代碼輸出，接下來就讓它去自動安裝好了，安裝完后package.json的內容如下：

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kevin",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-uglify": "^3.0.0"
  }
}

 

構建Gulp任務

在myProject目錄下新建gulpfile.js和.babelrc(注意開頭有個.)文件。

gulp的在運行時會在項目目錄下尋找gulpfile.js文件，找不到會報錯

同理，babel編譯ES6也會相應去找項目目錄下尋找.babelrc文件，找不到同樣會報錯

在gulpfile.js的內容如下：

var gulp = require('gulp'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify');


//創建一個名為js的任務
gulp.task('js', function(){
    // 首先取得app/static/scripts下的所有為.js的文件（**/的意思是包含所有子文件夾)
    return gulp.src('app/static/scripts/**/*.js')
        //將ES6代碼轉譯為可執行的JS代碼
        .pipe(babel())
        //js壓縮
        .pipe(uglify())
        //將轉譯壓縮后的文件輸出到dist/static/scripts下（假如沒有dist目錄則自動生成dist目錄）
        .pipe(gulp.dest('dist/static/scripts'))
})

//創建一個名為default的任務（上面的任務都可以沒有，但是這個任務必須有，不然在終端執行gulp命令會報錯）
//在終端上輸入gulp命令，會默認執行default任務，並執行js任務
gulp.task('default', ['js']);

.babelrc的內容如下：

{
    "presets": ["env"]
}

 

最后

在終端上進入myProject目錄，執行gulp命令，會生成一個dist目錄，里面會有一個編譯好的JS文件，在html里面引入編譯好的文件，然后就可以像平時那樣玩耍了。

 

更齊全的gulp自動化配置方案請參考《使用Gulp構建前端自動化方案》。

有什么問題可以留言，看到會回復。謝謝收看。