indent

gulp+Babel ES6初体验

新建项目文件夹
mkdir gulp-es6-demo

进入项目文件夹
cd gulp-es6-demo

创建src文件夹和dist文件夹
mkdir src dist

初始化项目 得到package.json文件
cnpm init

安装babel-cli babel-preset-env
npm install –save-dev babel-cli babel-preset-env

创建babel配置文件.babelrc
windows下新建该文件会提示必须键入文件名,解决办法是文件名如下.babelrc.
将规则加入到.babelrc文件中

1
2
3
{
"presets": ["env"]
}

安装gulp gulp-babel gulp-watch
npm install –save-dev gulp gulp-babel gulp-watch

创建gulpfile.js文件
将以下内容加入到gulpfile.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require("gulp"),  
babel = require("gulp-babel"),
watch = require("gulp-watch");

gulp.task("babeljs", function () {
return gulp.src("src/js/*.js")
.pipe(babel())
.pipe(gulp.dest("dist/js"));
});
gulp.task("watch",function(){
gulp.watch('src/js/*.js',['babeljs']);
})

gulp.task('default',['watch','babeljs']);

至此所有工具都已经安装好 并且配置好了。下面来写一段es6试试

在src下,新建js文件夹 并且新建demo.js。并输入如下内容:

1
[1,2,3].map(n => n + 1);

运行实现转码
gulp
我们可以看到在dist下生成了 dist/js/demo.js 文件,打开内容如下:

1
2
3
4
5
"use strict";

[1, 2, 3].map(function (n) {
return n + 1;
});

849890769@qq.com

Proudly published with Hexo