搭建一个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...