讓瀏覽器兼容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構建前端自動化方案》。

有什麼問題能夠留言，看到會回覆。謝謝收看。