手把手教你搭建ES6的開發(fā)運(yùn)行環(huán)境
前言
ECMAScript 6.0(以下簡(jiǎn)稱 ES6)是 JavaScript 語言的下一代標(biāo)準(zhǔn),已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo),是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序,成為企業(yè)級(jí)開發(fā)語言。
其實(shí)當(dāng)ES5還沒有完全普及時(shí),ES6就接踵而來了,在發(fā)布之后的將近一年內(nèi),很多小伙伴都踴躍的學(xué)習(xí)這門新的語言,之所以說是一門新的語言,是因?yàn)楦鶨S5相比,語法方面變化確實(shí)有點(diǎn)大,可以說新的JavaScript語法看上去有種脫胎換骨的感覺。博主也曾躍躍欲試,看了很多語法方面的教程,可是無奈瀏覽器還未完全支持ES6的規(guī)范,只看不練,有種眼高手低的感覺,相信朋友們也會(huì)有同樣的心情,那么怎樣可以愉快的寫ES6代碼,進(jìn)而將學(xué)到的東西轉(zhuǎn)化成實(shí)踐呢,別擔(dān)心,今天我們就來學(xué)習(xí)ES6構(gòu)建方面的知識(shí),并搭建一個(gè)簡(jiǎn)單的學(xué)習(xí)環(huán)境。 下面話不多說了,來一起看看詳細(xì)的介紹。
首先需要介紹一個(gè)ES6開發(fā)利器:Babel。
Babel是一個(gè)編譯器,負(fù)責(zé)將源代碼轉(zhuǎn)換成指定的語法的目標(biāo)代碼,可以使之很好的在運(yùn)行環(huán)境中執(zhí)行我們的代碼。下面我們就來詳細(xì)介紹這個(gè)神器,利用它來編譯我們的ES6代碼。
Babel給我們提供了一個(gè)很方便的命令行工具:babel-cli,利用它我們可以在命令行中執(zhí)行編譯命令,我們只需使用npm來安裝它即可:
npm install -g babel-cli
除此之外,我們還需要安裝轉(zhuǎn)碼規(guī)則包,Babel支持很多語法的轉(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文件用于寫入ES6源代碼,Babel編譯源文件時(shí)沒有過多的限制,所以我們也可以選擇使用js或es作為文件后綴名?,F(xiàn)在我們將下面這段ES6代碼寫入到test.es6中:
let name = 'Scott'; let greeting = `hello ${name}`; console.log(greeting);
接下來我們就可以來運(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語法已經(jīng)被編譯成ES5的語法了,這個(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庫,這顯然不是最好的解決方案。如果我們checkout出一個(gè)項(xiàng)目,必須要先在全局安裝babel-cli庫才能運(yùn)行,我們不希望有這樣的依賴。另外不同的項(xiàng)目依賴庫的版本可能都不同,全局的babel-cli庫也不能保證兼容各個(gè)項(xiàng)目中其他依賴庫的版本。除此之外,每次手動(dòng)運(yùn)行編譯命令也太繁瑣了,我們希望將babel-cli庫安裝到本地,并且使用一個(gè)簡(jiǎn)單的命令執(zhí)行編譯任務(wù)。
首先我們需要在本地安裝babel-cli庫:
npm install babel-cli --save-dev
現(xiàn)在我們可以卸載全局的babel-cli庫了:
npm uninstall -g babel-cli
最后,我們需要在package.json里面修改一下scripts:
"scripts": { "compile": "babel es6 --out-dir js --presets es2015" }
修改完成之后,我們就可以使用npm來運(yùn)行這個(gè)編譯任務(wù)了,只需下面一條簡(jiǎn)單的指令即可:
npm run compile
上面只是利用babel將ES6源代碼編譯成JS,在開發(fā)中,我們還需要考慮更多東西,比如模塊化開發(fā)、自動(dòng)編譯和構(gòu)建等等。接下來,我們就搭建一個(gè)簡(jiǎn)單的ES6開發(fā)環(huán)境,來支持ES6學(xué)習(xí)階段的開發(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來定義一個(gè)greet函數(shù),模擬1秒后返回一個(gè)hello開頭的字符串,而main.es6中引入了hello.es6并調(diào)用了greet函數(shù),最后將結(jié)果刷新到DOM元素中。
要使這兩個(gè)源代碼文件生效,首先需要把它們編譯成JS,然后再將JS文件打包,現(xiàn)在我們就來使用gulp的方式構(gòu)建這個(gè)過程。
要完成這個(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語法部分的編譯,對(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è)命令我們是指定了開發(fā)模式,開發(fā)模式會(huì)監(jiān)聽es6目錄中的文件改動(dòng),并重新構(gòu)建;而第二個(gè)命令是用來啟動(dòng)一個(gè)服務(wù),在8000端口監(jiān)聽。
上面的項(xiàng)目已放到Github上,感興趣的同學(xué)可以去看一下,也可以克隆到本地親自試一試。
github地址:https://github.com/scottliu2011/es6-dev
本地下載地址:http://xiazai.jb51.net/201707/yuanma/es6-dev(jb51.net).rar
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JS版獲取字符串真實(shí)長度和取固定長度的字符串函數(shù)
JS版獲取字符串真實(shí)長度和取固定長度的字符串函數(shù)...2007-04-04JavaScript語句錯(cuò)誤throw、try及catch實(shí)例解析
這篇文章主要介紹了JavaScript語句錯(cuò)誤throw、try及catch實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08js遍歷、動(dòng)態(tài)的添加數(shù)據(jù)的小例子
js遍歷、動(dòng)態(tài)的添加數(shù)據(jù)的小例子,需要的朋友可以參考一下2013-06-06JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法,需要的朋友可以參考下。2009-10-10簡(jiǎn)潔短小的 JavaScript IE 瀏覽器判定代碼
IE瀏覽器不管是什么版本,總是跟Web標(biāo)準(zhǔn)有些不太兼容。對(duì)于代碼工作者來說,自然是苦不堪言,為了考慮IE的兼容問題,不管是寫 CSS 還是 JS,往往都要對(duì) IE 特別對(duì)待,這就少不了做些判斷。本文不討論如何區(qū)分 IE 的樣式,僅是 JS 判定 IE 瀏覽器。2010-03-03