搭建一个ES6的运行环境

如今ES6已经发布了有一段时间了，很多人学了ES6但是却没运行环境，今天有空就写了一个 可以运行ES6的运行环境。

配置node+npm

首先机子上一定得安装node+npm,具体怎么安装应该都了解的，这里就不重复多讲了

文件目录

安装完node+npm之后，在新建的项目里 输入

 npm init -yes

自动生成package.json 文件，然后添加依赖的开发包，具体如下：

  "devDependencies": {
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.6.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-browserify": "^0.5.1",
    "gulp-connect": "^3.2.3",
    "gulp-rename": "^1.2.2",
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "^1.5.3"
  }

然后新建一个app文件夹，在文件里在新建一个写ES6的文件夹，然后就可以再里面写ES6的文件了，可以以.js结尾也可以以.es6结尾。
写完js文件之后，就开始编写gulpfile.js 文件了，在app文件夹的同一个目录下新建一个gulpfile.js文件。
大致的文件目录结构，如图：

编写gulp文件

var gulp = require('gulp'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    browserify = require('gulp-browserify'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    gulpsync = require('gulp-sync')(gulp);

// 定义解析es6的任务
gulp.task('compile-es6', function() {
  return gulp.src('app/es6/*')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('app/js'));
});

// 将解析出来的js打包
gulp.task('pack-js', function() {
  return gulp.src('app/js/main.js')
    .pipe(browserify())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest('app/bundle'));
});

// 定义监听任务
gulp.task('watch', function () {
  gulp.watch('./app/es6/*', gulpsync.sync(['compile-es6', 'pack-js']));
})

//启动服务端口3000
gulp.task('server', gulpsync.sync(['compile-es6', 'pack-js', 'watch']), function() {
  connect.server({
    root: 'app',
    port: 3000,
    livereload: true
  });
});

编写ES6代码

main.es6

import {greet} from './hello';

greet('ES6').then((res) => {
    document.getElementById('content').innerHTML += res;
});

hello.es6

function greet(name) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello ' + name);
        }, 1000);
    });
}

exports.greet = greet;

具体代码可以参考我的github，https://github.com/IOJINDD/ES...