由于 ES6 的语法并没有完全被浏览器所兼容,所以可以利用一些工具把 ES6 转化成 ES5 的语法,这样可以达到测试功能的的作用。主要用到的工具有
gulp + babel
这里我的电脑是 ThinkPad X230 win7 用 GIT 输入命令行,不知道 git 的同学可以看看廖雪峰大神的博客。
gulp
怎么用 gulp gulp官方文档
-
全局安装 gulp:
$ npm install --global gulp
-
作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
-
在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放这里
});
上面的默认代码我们写了一个控制台的打印 hello world
下面的代码就是 gulpfile.js 的内容
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('hello world')
});
然后运行命令
gulp hello
得到下图
babel 的使用
babel 的官网是 babeljs。这里使用的是 gulp-babel 在命令行中执行
cnpm install --save-dev gulp-babel babel-preset-es2015
这时候在 gulpfile.js 中写入如下代码
var gulp = require('gulp');
var babel = require('gulp-babel');
/*gulp.task('hello', function() {
console.log('hello world')
});*/
gulp.task('babelTask', function() {
gulp.src('es6Test.js')//这是要转化的目标文件
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'))//把转化完的文件生成到 disk 文件夹下
});
新建目标文件 es6Test.js 内容随便写了一个 ES6 的语法
let a = 10;
console.log(a);
保存以上的文件,然后执行命令 gulp babelTask
这时候你会发现在项目的目录下有个 dist 的文件夹,里面有转化好的目标文件
环境算是搭建完成了,感谢千峰教育杜老师的直播教学。