搭建ES6運行環境

      當ES5尚未徹底普及時，ES6就接踵而來了，2015年6月17日，ECMAScript 6發佈正式版本，即ECMAScript 2015，咱們也簡稱它爲ES6或ES2015。在發佈以後的將近一年內，不少小夥伴都踊躍的學習這門新的語言，之因此說是一門新的語言，是由於跟ES5相比，語法方面變化確實有點大，能夠說新的JavaScript語法看上去有種脫胎換骨的感受。博主也曾躍躍欲試，看了不少語法方面的教程，但是無奈瀏覽器還未徹底支持ES6的規範，只看不練，有種眼高手低的感受，相信朋友們也會有一樣的心情，那麼怎樣能夠愉快的寫ES6代碼，進而將學到的東西轉化成實踐呢，別擔憂，今天咱們就來學習ES6構建方面的知識，並搭建一個簡單的學習環境。 
首先須要介紹一個ES6開發利器：Babel。 
Babel是一個編譯器，負責將源代碼轉換成指定的語法的目標代碼，可使之很好的在運行環境中執行咱們的代碼。下面咱們就來詳細介紹這個神器，利用它來編譯咱們的ES6代碼。 
Babel給咱們提供了一個很方便的命令行工具：babel-cli，利用它咱們能夠在命令行中執行編譯命令，咱們只需使用npm來安裝它便可：

npm install -g babel-cli

   除此以外，咱們還須要安裝轉碼規則包，Babel支持不少語法的轉碼，好比咱們想要將ES6轉換成ES5，那麼須要安裝babel-preset-es2015包，若是咱們想要編譯React源碼，就須要安裝babel-preset-react，這裏咱們須要安裝babel-preset-es2015。爲此咱們建立一個babel-test目錄，在這個目錄裏咱們建立兩個目錄，es6和js，分別用於放置ES6源代碼和編譯後的ES5目標代碼，而後咱們使用「npm init –yes」命令生成一個默認的package.json文件，babel-test目錄結構以下圖所示： 
 
而後在當前目錄執行下面這行命令安裝ES6轉碼規則包：

npm install babel-preset-es2015 --save-dev

• 1

• 1

在es6目錄中咱們建立了一個test.es6文件用於寫入ES6源代碼，Babel編譯源文件時沒有過多的限制，因此咱們也能夠選擇使用js或es做爲文件後綴名。如今咱們將下面這段ES6代碼寫入到test.es6中：

let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);

　

接下來咱們就能夠來運行babel的命令編譯咱們的ES6源代碼了：

babel es6/test.es6 --out-file js/test.js --presets es2015

這行命令的含義是：編譯es6下面的test.es6文件，輸出文件爲js下面的test.js，同時指定編譯規則包爲es2015。命令執行完成後，咱們會在js目錄中找到一個test.js文件，如圖所示： 
 
看以看到，上面的ES6語法已經被編譯成ES5的語法了，這個文件就能夠被加載到現有的運行環境執行了。另外，若是咱們也能夠編譯整個目錄的源文件，只需指定「–out-dir」參數便可：

babel es6 --out-dir js --presets es2015

這行命令的做用是對整個es6目錄中的文件進行編譯，編譯結果輸出到js目錄，以下圖所示： 
 
到目前爲止，咱們仍手動執行babel命令編譯源代碼，而且咱們使用了全局的babel-cli庫，這顯然不是最好的解決方案。若是咱們checkout出一個項目，必需要先在全局安裝babel-cli庫才能運行，咱們不但願有這樣的依賴。另外不一樣的項目依賴庫的版本可能都不一樣，全局的babel-cli庫也不能保證兼容各個項目中其餘依賴庫的版本。除此以外，每次手動運行編譯命令也太繁瑣了，咱們但願將babel-cli庫安裝到本地，而且使用一個簡單的命令執行編譯任務。 
首先咱們須要在本地安裝babel-cli庫：

npm install babel-cli --save-dev

如今咱們能夠卸載全局的babel-cli庫了：

npm uninstall -g babel-cli

最後，咱們須要在package.json裏面修改一下scripts：

"scripts": {
    "compile": "babel es6 --out-dir js --presets es2015"
}

 

修改完成以後，咱們就可使用npm來運行這個編譯任務了，只需下面一條簡單的指令便可：

npm run compile

上面只是利用babel將ES6源代碼編譯成JS，在開發中，咱們還須要考慮更多東西，好比模塊化開發、自動編譯和構建等等。接下來，咱們就搭建一個簡單的ES6開發環境，來支持ES6學習階段的開發。 
首先，咱們建立一個簡單的應用，它包含一個index.html和es6目錄，es6目錄中又包含hello.es6和main.es6兩個文件，在構建完成後，會多出js和bundle兩個目錄，分別放置編譯後的JS代碼和打包後的bundle文件： 
 
其中，hello.es6定義了greet函數，而main.es6是入口文件，下面是相關的代碼：

//hello.es6

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

exports.greet = greet;

//main.es6

import "babel-polyfill";

import {greet} from './hello';

greet('Scott').then((greeting) => {
    document.getElementById('container').innerHTML += greeting;
});

document.getElementById('container').innerHTML = 'I am greeting: ';

能夠看到，hello.es6中使用了ES6的箭頭函數和Promise來定義一個greet函數，模擬1秒後返回一個hello開頭的字符串，而main.es6中引入了hello.es6並調用了greet函數，最後將結果刷新到DOM元素中。 
要使這兩個源代碼文件生效，首先須要把它們編譯成JS，而後再將JS文件打包，如今咱們就來使用gulp的方式構建這個過程。 
要完成這個任務，咱們須要先安裝相關的依賴包：

"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.2",
  "gulp-rename": "^1.2.2",
  "gulp-sync": "^0.1.4",
  "gulp-uglify": "^1.5.3"
}

其中，babel-polyfill是ES6的補丁，因爲babel只支持ES6語法部分的編譯，對於新增的類咱們還須要安裝額外的polyfill，雖然如今Chrome和Firefox都已經添加了Promise等新增的類，但爲了兼容舊版本的瀏覽器，這裏仍是安裝比較好。 
而後，咱們就建立幾個簡單的tasks，下面是gulpfile.js的代碼：

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

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

gulp.task('pack-js', function() {
  return gulp.src('app/js/main.js')
    .pipe(browserify())
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('app/bundle'));
});

gulp.task('compress-bundle', function() {
  return gulp.src('app/bundle/bundle.js')
    .pipe(uglify())
    .pipe(rename('bundle.min.js'))
    .pipe(gulp.dest('app/bundle'));
});

//build source files to released bundle file
gulp.task('build', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']), function() {
  if (process.argv.pop() == '--dev') {
    //watch any change and then re-run the tasks
    gulp.watch('app/es6/*', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']));
  }
});

//run a server listening at port 8000
gulp.task('server', function() {
  connect.server({
    root: 'app',
    port: 8000,
    livereload: true
  });
});

最後，只需在命令行中執行兩個命令就能夠了：

gulp build --dev

gulp server

第一個命令咱們是指定了開發模式，開發模式會監聽es6目錄中的文件改動，並從新構建；而第二個命令是用來啓動一個服務，在8000端口監聽。 

本文源自於轉載。。。。