es6引入很多新的语法特性,但是想要在现有浏览器环境执行,需要将ES6代码转为ES5代码,网上有很多转码器babel,traceur之类的,参考之后,使用traceur和gulp搭建es6运行环境,开始我的es6.
开始安装
首先确保电脑上安装了nodejs.
1.创建一个项目目录
2.全局安装Traceur,在控制台输入
npm install -g traceur
3.打开项目目录,安装gulp以及gulp-traceur插件
npm install -g gulp
npm install gulp gulp-traceur –save-dev
4.创建package.json文件 npm init,在项目根目录创建gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var traceur = require('gulp-traceur');
// Static Server + watching scss/html files
gulp.task('serve', ['traceur'], function() {
browserSync.init({
server: "./"
});
gulp.watch("build/**/*.js", ['traceur']);
});
gulp.task('traceur', function(){
return gulp.src('build/*.js')
.pipe(traceur({exprimental: true}))
.pipe(gulp.dest('js'));
});
gulp.task('default', ['serve']);
5.运行 gulp,当使用es6语法书写的build文件夹中的内容有变化时,traceur task执行,同时使用了browser-sync使浏览器实时响应文件更改(html、js、css、sass、less等)并自动刷新页面。
6.开始es6的使用.
参考文章
1.WebStorm中使用ES6的几种方式(http://www.cnblogs.com/darrenji/p/4997045.html)
2.browser-sync(http://www.browsersync.cn/)。