使用babel編譯es6

原由：開發中慢慢的學習使用es6，可是JavaScript須要瀏覽器來解析，而不是全部瀏覽器都支持es6，因此爲了兼容es6，須要第三方工具進行編譯es6。

工具：node，gulp，gulp-babel，babel-preset-es2015。

備註：只介紹基於node，gulp下的babel編譯es6。node安裝請自行網搜。npm轉淘寶鏡像cnpm請自行網搜。

開始：建立項目文件夾；打開命令行工具：右鍵開始菜單--運行--輸入cmd--回車。

1：檢驗node是否安裝成功：輸入    （有顯示版本號就表示安裝成功）

1 npm -v
2 node -v

1-1:檢驗淘寶鏡像是否安裝成功：輸入（有顯示版本號就表示安裝成功）（若安裝了淘寶鏡像以後的  npm 命令請替換爲 cnpm）

1 cnpm -v

2:安裝npm工具包   gulp，gulp-babel，babel-preset-es2015  輸入

1 npm gulp gulp-babel babel-preset-es2015 --save-dev

3:配置編譯環境

3-1：配置babel編譯須要的內容

　　在項目文件夾中新建文件，名稱  .babelrc   （windows下是沒法直接建立點開頭的文件的，經過編輯器或者IDE來建立就能夠了）。

　　在 .babelrc 寫入如下內容

1 {
2   "presets": [
3     "es2015"
4   ]
5 }

3-2：配置gulp運行須要的內容

　　在項目文件夾中新建文件，名稱 gulpfile.js

　　在 gulpfile.js 寫入如下內容

 1  //引入gulp，gulp-babel的npm模塊；
 2   var gulp = require('gulp');
 3   var babel = require('gulp-babel');
 4   
 5   //建立gulp運行代碼
 6   gulp.task('babel', function () { //‘babel’ gulp的腳本名稱，自定義命名
 7       return gulp.src(‘dev.js’) //js入口文件，可用絕對路徑、相對路徑，是文件類型
 8           .pipe(babel())          //運行gulp-babel進行編譯
 9           .pipe(gulp.dest(‘src’))  //編譯後的文件輸出地址，是文件夾類型
10  });

 

3-3：執行gulp進行編譯，命令行工具進入到項目目錄，輸入

1 gulp babel         //babel就是要執行gulp的腳本名稱，命名成什麼就改爲相應的

3-4：輸入完成後回車就能夠了。到輸出目錄去查看js文件吧。