前言

ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。

其實(shí)當(dāng)ES5還沒(méi)有完全普及時(shí)，ES6就接踵而來(lái)了，在發(fā)布之后的將近一年內(nèi)，很多小伙伴都踴躍的學(xué)習(xí)這門(mén)新的語(yǔ)言，之所以說(shuō)是一門(mén)新的語(yǔ)言，是因?yàn)楦鶨S5相比，語(yǔ)法方面變化確實(shí)有點(diǎn)大，可以說(shuō)新的JavaScript語(yǔ)法看上去有種脫胎換骨的感覺(jué)。博主也曾躍躍欲試，看了很多語(yǔ)法方面的教程，可是無(wú)奈瀏覽器還未完全支持ES6的規(guī)范，只看不練，有種眼高手低的感覺(jué)，相信朋友們也會(huì)有同樣的心情，那么怎樣可以愉快的寫(xiě)ES6代碼，進(jìn)而將學(xué)到的東西轉(zhuǎn)化成實(shí)踐呢，別擔(dān)心，今天我們就來(lái)學(xué)習(xí)ES6構(gòu)建方面的知識(shí)，并搭建一個(gè)簡(jiǎn)單的學(xué)習(xí)環(huán)境。 下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹。

首先需要介紹一個(gè)ES6開(kāi)發(fā)利器：Babel。

Babel是一個(gè)編譯器，負(fù)責(zé)將源代碼轉(zhuǎn)換成指定的語(yǔ)法的目標(biāo)代碼，可以使之很好的在運(yùn)行環(huán)境中執(zhí)行我們的代碼。下面我們就來(lái)詳細(xì)介紹這個(gè)神器，利用它來(lái)編譯我們的ES6代碼。

Babel給我們提供了一個(gè)很方便的命令行工具：babel-cli，利用它我們可以在命令行中執(zhí)行編譯命令，我們只需使用npm來(lái)安裝它即可：

npm install -g babel-cli

除此之外，我們還需要安裝轉(zhuǎn)碼規(guī)則包，Babel支持很多語(yǔ)法的轉(zhuǎn)碼，比如我們想要將ES6轉(zhuǎn)換成ES5，那么需要安裝babel-preset-es2015包，如果我們想要編譯React源碼，就需要安裝babel-preset-react，這里我們需要安裝babel-preset-es2015。為此我們創(chuàng)建一個(gè)babel-test目錄，在這個(gè)目錄里我們創(chuàng)建兩個(gè)目錄，es6和js，分別用于放置ES6源代碼和編譯后的ES5目標(biāo)代碼，然后我們使用“npm init –yes”命令生成一個(gè)默認(rèn)的package.json文件，babel-test目錄結(jié)構(gòu)如下圖所示： 

然后在當(dāng)前目錄執(zhí)行下面這行命令安裝ES6轉(zhuǎn)碼規(guī)則包：

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

在es6目錄中我們創(chuàng)建了一個(gè)test.es6文件用于寫(xiě)入ES6源代碼，Babel編譯源文件時(shí)沒(méi)有過(guò)多的限制，所以我們也可以選擇使用js或es作為文件后綴名?，F(xiàn)在我們將下面這段ES6代碼寫(xiě)入到test.es6中：

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

接下來(lái)我們就可以來(lái)運(yùn)行babel的命令編譯我們的ES6源代碼了：

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

這行命令的含義是：編譯es6下面的test.es6文件，輸出文件為js下面的test.js，同時(shí)指定編譯規(guī)則包為es2015。命令執(zhí)行完成后，我們會(huì)在js目錄中找到一個(gè)test.js文件，如圖所示： 

看以看到，上面的ES6語(yǔ)法已經(jīng)被編譯成ES5的語(yǔ)法了，這個(gè)文件就可以被加載到現(xiàn)有的運(yùn)行環(huán)境執(zhí)行了。另外，如果我們也可以編譯整個(gè)目錄的源文件，只需指定“–out-dir”參數(shù)即可：

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

這行命令的作用是對(duì)整個(gè)es6目錄中的文件進(jìn)行編譯，編譯結(jié)果輸出到j(luò)s目錄，如下圖所示： 

到目前為止，我們?nèi)允謩?dòng)執(zhí)行babel命令編譯源代碼，并且我們使用了全局的babel-cli庫(kù)，這顯然不是最好的解決方案。如果我們checkout出一個(gè)項(xiàng)目，必須要先在全局安裝babel-cli庫(kù)才能運(yùn)行，我們不希望有這樣的依賴。另外不同的項(xiàng)目依賴庫(kù)的版本可能都不同，全局的babel-cli庫(kù)也不能保證兼容各個(gè)項(xiàng)目中其他依賴庫(kù)的版本。除此之外，每次手動(dòng)運(yùn)行編譯命令也太繁瑣了，我們希望將babel-cli庫(kù)安裝到本地，并且使用一個(gè)簡(jiǎn)單的命令執(zhí)行編譯任務(wù)。

首先我們需要在本地安裝babel-cli庫(kù)：

npm install babel-cli --save-dev

現(xiàn)在我們可以卸載全局的babel-cli庫(kù)了：

npm uninstall -g babel-cli

最后，我們需要在package.json里面修改一下scripts：

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

修改完成之后，我們就可以使用npm來(lái)運(yùn)行這個(gè)編譯任務(wù)了，只需下面一條簡(jiǎn)單的指令即可：

npm run compile

上面只是利用babel將ES6源代碼編譯成JS，在開(kāi)發(fā)中，我們還需要考慮更多東西，比如模塊化開(kāi)發(fā)、自動(dòng)編譯和構(gòu)建等等。接下來(lái)，我們就搭建一個(gè)簡(jiǎn)單的ES6開(kāi)發(fā)環(huán)境，來(lái)支持ES6學(xué)習(xí)階段的開(kāi)發(fā)。

首先，我們創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用，它包含一個(gè)index.html和es6目錄，es6目錄中又包含hello.es6和main.es6兩個(gè)文件，在構(gòu)建完成后，會(huì)多出js和bundle兩個(gè)目錄，分別放置編譯后的JS代碼和打包后的bundle文件： 

其中，hello.es6定義了greet函數(shù)，而main.es6是入口文件，下面是相關(guān)的代碼：

//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的箭頭函數(shù)和Promise來(lái)定義一個(gè)greet函數(shù)，模擬1秒后返回一個(gè)hello開(kāi)頭的字符串，而main.es6中引入了hello.es6并調(diào)用了greet函數(shù)，最后將結(jié)果刷新到DOM元素中。

要使這兩個(gè)源代碼文件生效，首先需要把它們編譯成JS，然后再將JS文件打包，現(xiàn)在我們就來(lái)使用gulp的方式構(gòu)建這個(gè)過(guò)程。

要完成這個(gè)任務(wù)，我們需要先安裝相關(guān)的依賴包：

"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的補(bǔ)丁，由于babel只支持ES6語(yǔ)法部分的編譯，對(duì)于新增的類我們還需要安裝額外的polyfill，雖然現(xiàn)在Chrome和Firefox都已經(jīng)添加了Promise等新增的類，但為了兼容舊版本的瀏覽器，這里還是安裝比較好。

然后，我們就創(chuàng)建幾個(gè)簡(jiǎn)單的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
 });
});

最后，只需在命令行中執(zhí)行兩個(gè)命令就可以了：

gulp build --dev

gulp server

第一個(gè)命令我們是指定了開(kāi)發(fā)模式，開(kāi)發(fā)模式會(huì)監(jiān)聽(tīng)es6目錄中的文件改動(dòng)，并重新構(gòu)建；而第二個(gè)命令是用來(lái)啟動(dòng)一個(gè)服務(wù)，在8000端口監(jiān)聽(tīng)。

上面的項(xiàng)目已放到Github上，感興趣的同學(xué)可以去看一下，也可以克隆到本地親自試一試。

github地址：https://github.com/scottliu2011/es6-dev

本地下載地址：http://xiazai.jb51.net/201707/yuanma/es6-dev(jb51.net).rar

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論