使用 babel 搭建 es6 开发环境

蓝猫
1,331 阅读5分钟
原文链接： lanmaowz.com

学习es6有一段时间了，个人觉得适合新手学习的es6学习资料有这么几个

有过java开发经验的人转es6其实很容易的，es6最新的class语法和java的已经非常接近了，java那一套面向对象的思维方式以及常用的设计模式都可以很容易的移植到es6上面。

在这一个过程中最大的体验就是深刻的理解了面向对象是一种编程思想，而不是某个特定的编程语言，如果积累足够多的java面向对象编程实践，那么转移到另外一种面向对象编程语言的时候需要学习的只是新的语法和工具库，这也是为什么有很多优秀的程序员不管学习哪门语言都能写出优秀的代码的原因，至少我是这么认为的。

如果你觉得自己在某个语言（例如java）进步缓慢的时候，也许你可以考虑学一门新的编程语言，来提升自己对编程语言的理解。

说的有点远了，回归正题。虽然es6有很多新的特性，受兼容性问题的限制，不是所有的js环境都支持es6全部的新功能，大部分浏览器还只是实现了es6一些基础的特性，更多的如Promise，WeakSet，Symbol等等，更全的列表可以去babel官网上查看：babeljs.io/。

前端要想使用es6统一js开发版本，有两个办法，一个是使用babel或者traceur-compiler把es6代码编译成es5,99%的浏览器都支持es5；另外一个办法是使用polyfill，通过polyfill库来执行客户端es6脚本。

总的来说还是编译es6代码这个方案更好一些，毕竟使用polyfill库会带来额外的网络开销，容易拖慢网页加载速度。

后端node.js目前也不是完全支持es6，这里有一个es6的兼容性列表，里面详细列举了各个环境下对es6特性的支持程度，想学习前端的一定不要漏掉这个表，这个表很具有参考价值。

使用traceur-compiler编译es6代码的公司和开发人员并不多，虽然这个项目是谷歌开发的，但是大家还是更喜欢用babel。

为了用一个有实际意义的项目练习es6和babel，我克隆了github上面的一个p2pspider项目，这个项目是一个使用nodejs开发的dht爬虫项目，通过几天的修改，我把它进行了改造，源码地址是：p2pspider。

如果你想使用一个startup项目，可以使用这个项目github.com/anvk/babel-…

虽然babel可以用来编译es6代码，但是还是缺少一个自动化编译脚本，这里使用的是gulp，gulpfile.babel.js的内容如下

import gulp from 'gulp';
import babel from 'gulp-babel';
import mocha from 'gulp-mocha';
import eslint from 'gulp-eslint';
import rimraf from 'gulp-rimraf';
import runSequence from 'run-sequence';

var config = {
  paths: {
    js: {
      src: 'src/**/*.js',
      dist: 'dist/'
    },
    test: {
      src: 'test/**/*.js',
      dist: 'test-dist/',
      run: 'test-dist/**/*.js'
    }
  }
};

gulp.task('clean', () =>
  gulp.src([config.paths.js.dist, config.paths.test.dist])
    .pipe(rimraf({ force: true }))
);

gulp.task('babel', ['babel-src', 'babel-test']);

gulp.task('babel-src', ['lint-src'], () =>
  gulp.src(config.paths.js.src)
    .pipe(babel())
    .pipe(gulp.dest(config.paths.js.dist))
);

gulp.task('babel-test', ['lint-test'], () =>
  gulp.src(config.paths.test.src)
    .pipe(babel())
    .pipe(gulp.dest(config.paths.test.dist))
);

gulp.task('lint-src', () =>
  gulp.src(config.paths.js.src)
    .pipe(eslint())
    .pipe(eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failAfterError last.
    .pipe(eslint.failAfterError())
);

gulp.task('lint-test', () =>
  gulp.src(config.paths.test.src)
    .pipe(eslint())
    .pipe(eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failAfterError last.
    .pipe(eslint.failAfterError())
);

gulp.task('watch', () => {
  gulp.watch(config.paths.js.src, ['babel-src', 'test']);
  gulp.watch(config.paths.test.src, ['babel-test', 'test']);
});

gulp.task('test', ['babel'], () =>
  gulp.src([config.paths.test.run])
    .pipe(mocha({ reporter: 'spec' }))
    .on('error', err => console.log(err.stack))
);

// Default Task
gulp.task('default', () =>
  runSequence('clean', ['babel', 'test'])
);

这个任务文件非常的通用，可以用在任何es6+babel项目里面，当然你也可以根据自己的需要添加更多的命令。

说到gulp简单提一下，gulp默认不支持es6的，如果要使用es6编写gulpfile，你需要把gulpfile.js重命名成gulpfile.babel.js，同时在package.json里面添加"gulp-babel": "6.1.2",依赖，gulp就能通过babel编译gulpfile然后执行任务。

gulp目前的稳定版本是3.9，在4.0出来以后可能就不需要这么麻烦了，可以直接在gulpfile.js里面写es6的语法。

使用babel+es6可以统一js的开发环境其实是一件很有必要的事情。

  • 其一，可以强迫自己学习新的es6语法，等es6成为主流的时候可以积累足够多的开发经验，而且es6能写出更简洁的代码。

  • 其二，通过babel编译源码，可以把很多运行时才能发现的错误提前到编译期，大大的节省了调试代码的时间。

  • 其三，可以统一js的编码规范，js是一门很灵活的语言，这对新手来说是一个好消息，也是一个坏消息。好消息是你花一个下午简单学一下语法就能说自己学会js开发了，坏消息是你用这种简单的思路写了一年js代码，最终发现你还是停留在新手阶段。

github上有一个airbnb的js规范，github.com/airbnb/java…

有了代码规范，还缺少一个代码检查的工具，幸运的是你不需要自己动手开发这样的工具，eslint jslint jshint三个工具中你可以随便选择，p2pspider这个项目用的是eslint，配合airbnb的eslint插件，我们就能使用airbnb的代码规范，然后在gulp编译源码之前先使用eslint进行代码检查。

差不多就到这里了，很久没有更新博客，是时候刷下存在感了。

avatar
文章
阅读
粉丝