ES6 环境搭建

由于 ES6 的语法并没有完全被浏览器所兼容,所以可以利用一些工具把 ES6 转化成 ES5 的语法,这样可以达到测试功能的的作用。主要用到的工具有

gulp + babel

这里我的电脑是 ThinkPad X230 win7 用 GIT 输入命令行,不知道 git 的同学可以看看廖雪峰大神的博客。

gulp

怎么用 gulp gulp官方文档

  1. 全局安装 gulp:
    $ npm install --global gulp

  2. 作为项目的开发依赖(devDependencies)安装:
    $ npm install --save-dev gulp

  3. 在项目根目录下创建一个名为 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 的文件夹,里面有转化好的目标文件


环境算是搭建完成了,感谢千峰教育杜老师的直播教学。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、ES6 参考 http://es6.ruanyifeng.com/ ECMAScript当前所有提案 Git...
    pifoo阅读 11,881评论 1 13
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,232评论 7 55
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,335评论 0 10
  • ES6其实就是javascript的升级版。有些浏览器已经慢慢支持ES6,或者在node的环境下也可以支持ES6,...
    meiziLin阅读 792评论 0 1
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 980评论 0 1