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命令