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