寫在正文前,本來(lái)這一節(jié)的內(nèi)容應(yīng)該放在第二節(jié)更合適,因?yàn)楫?dāng)時(shí)就有同學(xué)問(wèn)ES6的兼容性如何,如何在瀏覽器兼容ES6的特性,這節(jié)會(huì)介紹一個(gè)抱磚引玉的操作案例。
為什么ES6會(huì)有兼容性問(wèn)題?
由于廣大用戶使用的瀏覽器版本在發(fā)布的時(shí)候也許早于ES6的定稿和發(fā)布,而到了今天,我們?cè)诰幊讨腥绻褂昧薊S6的新特性,瀏覽器若沒有更新版本,或者新版本中沒有對(duì)ES6的特性進(jìn)行兼容,那么瀏覽器肯定無(wú)法識(shí)別我們的ES6代碼,好比瀏覽器根本看不懂我寫的let和const是什么東西?只能報(bào)錯(cuò)了。這就是瀏覽器對(duì)ES6的兼容性問(wèn)題。
好消息
哪里有災(zāi)難,哪里就有勇士和救兵,針對(duì)ES6的兼容性問(wèn)題,很多團(tuán)隊(duì)為此開發(fā)出了多種語(yǔ)法解析轉(zhuǎn)換工具,把我們寫的ES6語(yǔ)法轉(zhuǎn)換成ES5,相當(dāng)于在ES6和瀏覽器之間做了一個(gè)翻譯官。比較通用的工具方案有babel,jsx,traceur,es6-shim等。
此外,瀏覽器自身也加快速度兼容ES6的新特性,其中對(duì)ES6新特性最友好的是Chrome和Firefox瀏覽器。
各大轉(zhuǎn)換工具、javascript解析引擎對(duì)ES6的支持程度情況,可以參查看這個(gè)地址:
'http://kangax.github.io/compat-table/es6/'
壞消息
即使瀏覽器對(duì)ES6新特性開始漸漸支持,但是這還需要很長(zhǎng)一段時(shí)間,我們不能百分百依賴瀏覽器本身對(duì)ES6的支持度來(lái)開發(fā)。
雖然出現(xiàn)了各種轉(zhuǎn)換工具,但是到目前為止,還沒有一款工具能百分百將ES6的新特性完美地轉(zhuǎn)換成ES5,因?yàn)樵贓S6新增的內(nèi)容中,存在一些無(wú)法在ES5中找到與之匹配的語(yǔ)法,所以不建議在生產(chǎn)環(huán)境中使用支持度較低的新特性,后續(xù)的教程章節(jié)中介紹的新特性前端君也會(huì)特意提醒它的兼容性。
學(xué)習(xí)熱情不減
但是,這并不影響我們學(xué)習(xí)ES6的熱情,因?yàn)镋S6是未來(lái)的標(biāo)準(zhǔn),瀏覽器支持只是遲早的事。
本節(jié)介紹其中一個(gè)轉(zhuǎn)換工具的安裝和使用情況,安裝使用以簡(jiǎn)單為主,主要是讓新手和剛接觸的同學(xué)對(duì)轉(zhuǎn)換工具有感性的認(rèn)知。再次表明,即使使用了轉(zhuǎn)換工具,我們還是不建議在生產(chǎn)環(huán)境大量地使用ES6的特性。
使用轉(zhuǎn)換工具babel
我們選擇Babel作為學(xué)習(xí)和講解的工具,以及最多人使用的windows作為操作系統(tǒng)。
接下來(lái)的前端君建議你打開電腦,跟著教程一步步操作。(沒有也不要緊,先收藏此文)
步驟1:制作ES6文件
新建一個(gè)html文件,取名為:ES6.html,加上含有ES6新特性的代碼,比如:
const Name = '張三';//使用新增的關(guān)鍵字:const聲明常量 alert(Name)
步驟2:測(cè)試const兼容性
我們?cè)赾hrome瀏覽器(版本不能太低)運(yùn)行ES6.html,會(huì)正常運(yùn)行,彈出“張三”。
接下來(lái)我們運(yùn)行在IE 9,會(huì)看到這樣的情況:
IE 9瀏覽器會(huì)提示我們第9行出現(xiàn)一個(gè)語(yǔ)法錯(cuò)誤,相當(dāng)于告訴我們它看不懂const是什么鬼,但是學(xué)過(guò)ES6入門系列第三節(jié)的我們都知道const是ES6的新增關(guān)鍵字,用于聲明一個(gè)常量。這個(gè)時(shí)候我們知道const在IE9瀏覽器出現(xiàn)了兼容性問(wèn)題了。
下面我們開始用Babel來(lái)兼容它。
我們可以使用npm來(lái)安裝babel,npm是隨同Nodejs一起安裝的包管理工具,新版的nodejs已經(jīng)繼承了npm,我們只要安裝nodejs即可。對(duì)于nodejs的安裝,不在本節(jié)的學(xué)習(xí)范圍,我就不作展開說(shuō)明了..........才怪。(說(shuō)好的簡(jiǎn)單易懂,前端君怎么會(huì)半途掉鏈子)
步驟3:安裝node
來(lái),沒安裝過(guò)的node的同學(xué),我們來(lái)一起安裝:
node官網(wǎng)(下載安裝包.msi):https://nodejs.org/
(nodejs官網(wǎng)首頁(yè)截圖)
我們點(diǎn)擊v4.4.5LTS進(jìn)行下載,下載后找到node-v4.4.5-x64.msi雙擊運(yùn)行,點(diǎn)擊next(下一步)安裝即可。期間你可以自定義選擇安裝的位置,默認(rèn)是C:\ProgramFiles\。最后一步點(diǎn)擊 Finish(完成)按鈕退出安裝向?qū)А?/p>
步驟4:檢測(cè)node是否安裝成功
安裝結(jié)束后,我們檢測(cè)是否安裝成功:
點(diǎn)擊 “開始”-> “運(yùn)行”-> 輸入“cmd”-> 進(jìn)入命令提示符窗口,輸入“node --version”來(lái)檢測(cè)當(dāng)前node的版本。
出現(xiàn):v4.4.5就表示安裝成功,因?yàn)槲覀兿螺d的就是v4.4.5LTS。
步驟5:用npm安裝babel
好了,node安裝好了,也就是它集成的npm包管理工具也安裝好了,接下來(lái),我們利用npm來(lái)安裝我們最想要的babel。
同樣我們啟動(dòng)命令提示符窗口并且輸入:npm install babel-core@5,然后回車,這里要稍等片刻:
在這個(gè)目錄里面我們找到babel的瀏覽器版本browser.js(未壓縮版)和browser.min.js(壓縮版)。
步驟6:使用babel
然后我們將這個(gè)文件使用在我們的ES6.html中。
const Name = '張三';//使用新增的關(guān)鍵字:const聲明常量 alert(Name);
我們把browser.min.js引入(文件位置的路徑要確保正確)。并且設(shè)置第二個(gè)script標(biāo)簽的type為”text/babel”。
步驟7:讓const運(yùn)行在IE9瀏覽器上
然后我們?cè)僭贗E9瀏覽器上運(yùn)行一下:
這個(gè)時(shí)候IE9能正常運(yùn)行我們的ES6新特性了,也就是babel轉(zhuǎn)換起作用了,講const轉(zhuǎn)換成IE9能執(zhí)行的代碼了。
這節(jié)內(nèi)容操作教學(xué)的比較多,屬于很干的干貨,很多東西沒有展開講解,比如:node是什么?命令提示符怎么操作等問(wèn)題,對(duì)于剛剛接觸編程的新手來(lái)說(shuō),如果看不懂或者很多不理解也沒關(guān)系,不會(huì)阻礙后面章節(jié)的學(xué)習(xí),因?yàn)槟憧梢允褂肅hrome或者Firefox瀏覽器進(jìn)行學(xué)習(xí)和練習(xí),在這兩款瀏覽器上可以執(zhí)行大部分的ES6新特性,不需要使用類似babel的轉(zhuǎn)換工具。
這一節(jié)的講解只是作為一個(gè)學(xué)習(xí)的入門案例,起到拋磚引玉的作用,讓新手們能對(duì)ES6的兼容問(wèn)題和babel轉(zhuǎn)換工具有個(gè)感性認(rèn)知,并沒有覆蓋所有兼容方案的介紹,以后的開發(fā)中我們一定會(huì)發(fā)現(xiàn)更多關(guān)于ES6特性的坑,也會(huì)找到更多相對(duì)應(yīng)的解決辦法。填上這些坑,就是進(jìn)步的表現(xiàn)。
本節(jié)總結(jié)
總結(jié):目前,瀏覽器和轉(zhuǎn)換工具并沒有百分百支持ES6的全部新特性,但并不影響大家對(duì)ES6的學(xué)習(xí)熱情,因?yàn)檫@是未來(lái)的行業(yè)標(biāo)準(zhǔn),前端開發(fā)者必須掌握的技能;而今天介紹的babel就是目前對(duì) ES6 的支持程度較高,使用廣泛的ES6轉(zhuǎn)碼器。
ES6這一系列我一直再出,循序漸進(jìn).喜歡這篇文章的可以看看我的其他這一系列文章.
更多前端學(xué)習(xí)內(nèi)容文章干貨請(qǐng)關(guān)注我的專欄(不斷更新)
阿里名廠標(biāo)準(zhǔn)web前端高級(jí)工程師教程目錄大全,從基礎(chǔ)到進(jìn)階,看完保證您的薪資上升一個(gè)臺(tái)階
在這里我給大家準(zhǔn)備了很多的學(xué)習(xí)資料