摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。只是最近學(xué)習(xí)生態(tài)，用起來(lái)轉(zhuǎn)換之余，也不免碰到諸多用上的教程案例，因此便稍作學(xué)習(xí)。在當(dāng)前的瀏覽器市場(chǎng)下，想在生產(chǎn)環(huán)境用上，是必不可少的。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006992218
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

一直以來(lái)，我對(duì)ES6都不甚感興趣，一是因?yàn)樵谏a(chǎn)環(huán)境中使用ES5已是處處碰壁，其次則是只當(dāng)這ES6是語(yǔ)法糖不曾重視。只是最近學(xué)習(xí)react生態(tài)，用起babel來(lái)轉(zhuǎn)換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學(xué)習(xí)。這一學(xué)習(xí)，便覺(jué)得這語(yǔ)法糖實(shí)在是甜，忍不住嘗鮮，于是記錄部分自覺(jué)對(duì)自己有用的方法在此。

這是我數(shù)月前的一篇文章《ES6部分方法點(diǎn)評(píng)（一）》中的一段，如今再看我自己的代碼，觸目皆是ES6的語(yǔ)法。在當(dāng)前的瀏覽器市場(chǎng)下，想在生產(chǎn)環(huán)境用上ES6，Babel是必不可少的。

由于我本身只用了ES6的語(yǔ)法而未使用ES6的其它特性，因此本文只介紹如何利用webpack整合Babel來(lái)編譯ES6的語(yǔ)法，而實(shí)際上若要使用ES6的其它屬性甚至是ES7（ES2016），其實(shí)只需要引入Babel其它的preset/plugin即可，在用法上并無(wú)多大變化。

首先要說(shuō)到的是babel-loader，這是webpack整合Babel的關(guān)鍵，我們需要配置好babel-loader來(lái)加載那些使用了ES6語(yǔ)法的js文件；換句話說(shuō)，那些本來(lái)就是ES5語(yǔ)法的文件，其實(shí)是不需要用babel-loader來(lái)加載的，用了也只會(huì)浪費(fèi)我們編譯的時(shí)間。

然后就是babel相關(guān)的npm包，其中包括：

babel-core，babel的核心，沒(méi)啥好說(shuō)的。

babel-preset-es2015-loose，babel的preset（相當(dāng)于是一整套plugin）。babel是有許多preset的，看自己需要來(lái)選用，比如說(shuō)我只管ES6（ES2016）語(yǔ)法的就可以用babel-preset-es2015或babel-preset-es2015-loose。這倆preset其實(shí)用法一樣，差別就在于：

許多Babel的插件有兩種模式：
盡可能符合ECMAScript6語(yǔ)義的normal模式和提供更簡(jiǎn)單ES5代碼的loose模式。
優(yōu)點(diǎn)：生成的代碼可能更快，對(duì)老的引擎有更好的兼容性，代碼通常更簡(jiǎn)潔，更加的“ES5化”。
缺點(diǎn)：你是在冒險(xiǎn)——隨后從轉(zhuǎn)譯的ES6到原生的ES6時(shí)你會(huì)遇到問(wèn)題。

我自己的考慮是，肯定要更好的兼容性和更好的性能啦這還用想的嗎？（敲黑板）

babel-plugin-transform-runtime和babel-runtime，這屬于優(yōu)化項(xiàng)，不用也沒(méi)啥問(wèn)題，下文會(huì)細(xì)說(shuō)。

babel-loader的配置并不復(fù)雜，與其它loader并無(wú)二致：

    {
      test: /.js$/,
      exclude: /node_modules|vendor|bootstrap/,
      loader: "babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime",
    },

下面來(lái)詳細(xì)解釋此配置：

test: /.js$/表明我只用babel-loader來(lái)加載js文件，如果你只是小部分js文件應(yīng)用了ES6，那么也可以給這些文件換個(gè).es6的后綴名并把此處改為test: /.es6$/。

exclude: /node_modules|vendor|bootstrap/，上文已經(jīng)說(shuō)到了，不需要用babel來(lái)加載的文件還是剔除掉，否則會(huì)大量增加編譯的時(shí)間，一般我們只用babel編譯我們自己寫(xiě)的應(yīng)用代碼。

loader: "babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime"，這一行是指定使用babel-loader并傳入所需參數(shù)，這些參數(shù)其實(shí)也是可以通過(guò)babel配置文件.babelrc，不過(guò)我還是推薦在這里以參數(shù)的方式傳入。下面來(lái)介紹這些參數(shù)：

上文已經(jīng)解釋過(guò)preset是什么以及為啥要使用babel-preset-es2015-loose了，這里不再累述。

cacheDirectory參數(shù)默認(rèn)為false，若你設(shè)置為一個(gè)文件目錄路徑（表示把cache存到哪），或是保留為空（表示操作系統(tǒng)默認(rèn)的緩存目錄），則相當(dāng)于開(kāi)啟cache。這里的cache指的是babel在編譯過(guò)程中某些可以緩存的步驟，具體是什么我也不太清楚，反正是只要開(kāi)啟了cache就可以加快webpack整體編譯速度。我測(cè)試了一下，未開(kāi)啟cache的時(shí)候我的腳手架項(xiàng)目(Array-Huang/webpack-seed)需要15秒半來(lái)編譯；而開(kāi)啟cache后的第一次編譯時(shí)間并沒(méi)有減少，第二次編譯則變?yōu)?4秒了，足足減少了1秒半了棒棒噠。

雖說(shuō)一個(gè)preset已經(jīng)包括N個(gè)plugin了，但總有一些漏網(wǎng)之魚(yú)是要專門加載的。這里我只用到了transform-runtime，這個(gè)plugin的效果是：不用這plugin的話，babel會(huì)為每一個(gè)轉(zhuǎn)換后的文件（在webpack這就是每一個(gè)chunk了）都添加一些輔助的方法（僅在需要的情況下）；而如果用了這個(gè)plugin，babel會(huì)把這些輔助的方法都集中到一個(gè)文件里統(tǒng)一加載統(tǒng)一管理，算是一個(gè)減少冗余，增強(qiáng)性能的優(yōu)化項(xiàng)吧，用不用也看自己需要了；如果不用的話，前面也不需要安裝babel-plugin-transform-runtime和babel-runtime了。

諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。

webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁(yè)應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁(yè)應(yīng)用架構(gòu)系列（五）：聽(tīng)說(shuō)webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁(yè)應(yīng)用架構(gòu)系列（七）：開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁(yè)應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁(yè)應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板:https://segmentfault.com/a/1190000007126268

webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁(yè)應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006992218
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang