資訊專(zhuān)欄INFORMATION COLUMN
摘要：換言之，用的代碼取代。模塊在頂層作用域中創(chuàng)建聲明變量的行為有別于腳本。但現(xiàn)在是可以部署的，所以是時(shí)候去改變了。通過(guò)發(fā)布，我們?yōu)殚_(kāi)發(fā)人員提供了一種選擇，并最終惠及每個(gè)人。編寫(xiě)代碼對(duì)開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)勝利，部署代碼對(duì)用戶(hù)來(lái)說(shuō)是一個(gè)勝利。
原文鏈接
與我交流過(guò)的絕大多數(shù)web開(kāi)發(fā)者，都喜歡使用所有新的語(yǔ)法特性（如async/await，類(lèi)，箭頭函數(shù)等）。盡管所有現(xiàn)代瀏覽器都支持以上的語(yǔ)法，多部分開(kāi)發(fā)者仍然會(huì)轉(zhuǎn)譯到ES5并且加上polyfill以便支持哪一小部分仍舊使用老版本瀏覽器的用戶(hù)。
這...有點(diǎn)糟。在理想的的世界中，是沒(méi)有不必要的代碼！
新版本的JS和DOM接口能讓我們選擇性地加載polyfill，因?yàn)樵谶\(yùn)行時(shí)，我們可以檢測(cè)瀏覽器對(duì)新特性的支持情況。但是新的JS語(yǔ)法有一點(diǎn)不好，因?yàn)闊o(wú)法識(shí)別的語(yǔ)法都會(huì)造成解析錯(cuò)誤，導(dǎo)致沒(méi)有代碼會(huì)被執(zhí)行。
雖然現(xiàn)在并沒(méi)有對(duì)feature-detecting這個(gè)語(yǔ)法的好的解決方案，但我們確實(shí)有一個(gè)方法能做到ES2015語(yǔ)法支持的檢測(cè)。
這就是
小貼士：可惡的Safari 10并不支持nomodule屬性，不過(guò)你可以在HTML前部引入safari-nomodule.js來(lái)解決這一問(wèn)題。（好在，在Safari 11種他們解決了這個(gè)問(wèn)題，我到都拔出來(lái)了）
重要的思考
！
這多數(shù)情況下，這個(gè)方法“能用”。但是在使用這一策略前，我們需要了解模塊加載的一些細(xì)節(jié)。
模塊會(huì)像
即便經(jīng)過(guò)Gzip傳統(tǒng)ES5版本也是ES2015+版本體積的兩倍。
大體積文件不盡更耗費(fèi)時(shí)間去加載，同時(shí)，也需要更長(zhǎng)時(shí)間解析與執(zhí)行。這兩個(gè)版本的解析／執(zhí)行時(shí)間依舊是兩倍的關(guān)系。（這個(gè)測(cè)試我試用了webpagetest.org提供的 Moto G4）
雖然這些獨(dú)立的文件不大，解析/執(zhí)行的時(shí)間也不是特別長(zhǎng)，但這僅僅是個(gè)博客。如果是外頭那些龐然大物，ES2015+你絕對(duì)值得擁有！
一項(xiàng)來(lái)之HTTPArchive數(shù)據(jù)的統(tǒng)計(jì)顯示。Alexa排名前列的網(wǎng)站中有85181在他們的項(xiàng)目中使用了babel-polyfill, core-js, 或是regenerator-runtime。6個(gè)月前這個(gè)數(shù)字是34588!
現(xiàn)實(shí)就是轉(zhuǎn)譯以及使用polyfill正迅速成為新的標(biāo)準(zhǔn)。不幸的事，大部分用戶(hù)正因此犧牲了流量來(lái)下載這些本來(lái)可以更小的文件。
是時(shí)候，祭出ES2015了現(xiàn)在的問(wèn)題就是開(kāi)發(fā)者并沒(méi)有發(fā)布ES2015+版本的代碼，而是發(fā)布了轉(zhuǎn)譯后的ES5版本。
但現(xiàn)在ES2015+是可以部署的，所以是時(shí)候去改變了。
我完全明白，這會(huì)帶來(lái)一些陣痛。 如今大多數(shù)構(gòu)建工具發(fā)布的文檔，都推薦ES5的配置。 這意味著，如果模塊作者開(kāi)始向npm發(fā)布ES2015 +源代碼，他們可能會(huì)破壞一些用戶(hù)的構(gòu)建，這將會(huì)造成混亂。
問(wèn)題是大多數(shù)使用Babel的開(kāi)發(fā)人員將它配置為不在node_modules中傳輸任何內(nèi)容，但是如果模塊是使用ES2015 +源代碼發(fā)布的，則這是一個(gè)問(wèn)題。 幸運(yùn)的是修復(fù)很簡(jiǎn)單。 您只需從構(gòu)建配置中刪除node_modules排除：
rules: [
{
test: /.js$/,
exclude: /node_modules/, // 移除這行
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
}
]
弊端就是，babel這樣的工具不僅僅需要本地依賴(lài)關(guān)系，在執(zhí)行時(shí)還需要在node_modules中傳遞這種關(guān)系。這樣構(gòu)件會(huì)變慢。不過(guò)這一問(wèn)題可以在持續(xù)化的本地緩存工具上得到解決。
縱使前途坎坷，我們也因該為提升用戶(hù)體驗(yàn)大步向前。通過(guò)發(fā)布ES2015，我們?yōu)殚_(kāi)發(fā)人員提供了一種選擇，并最終惠及每個(gè)人。
結(jié)論