babel的使用詳解

由於es6的很多特性在舊的瀏覽器下支持不好，我們在使用的時候需要將其轉化為es5，下面介紹babel解析器的使用

一：獨立使用babel的方法

1.本地安裝babel-cli

npm install --save-dev babel-cli

 2.在根目錄下建立package.json文件

{
  "name": "es",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src -d js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-es2015": "^6.22.0"
  }
}
 

 3.安裝es5轉化模塊:

$ npm install --save-dev babel-preset-es2015

 4.在跟目錄下創建.babelrc文件，.babelrc文件的內容如下：

{
"presets": [ "es2015" ]
}

 創建.babelrc文件的方法可以在命令控制板里面輸入echo > .babelrc命令，或者使用sublime編輯器進行重命名去掉文件名，只留下帶.babelrc為后綴的文件。

 5.在命令面板終端里輸入 npm run build就可以將代碼解析成es5了。

 二：借助gulp插件進行解析

1.安裝gulp-babel插件

npm install --save-dev gulp-babel;

2.安裝es5解析插件

npm install --save-dev babel-preset-es2015

 3.修改gulpfile.js文件，添加解析任務。

var gulp = require("gulp"); 

var babel = require("gulp-babel"); 

gulp.task("default", function () { return gulp.src("src/**/*.js")// ES6 源碼存放的路徑 

.pipe(babel({ presets: ['es2015'] }))

 .pipe(gulp.dest("dist")); //轉換成 ES5 存放的路徑 });

4.執行gulp命令