本文首發(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ú)多大變化。

用到哪些npm包妇智？

首先要說(shuō)到的是babel-loader滥玷，這是webpack整合Babel的關(guān)鍵，我們需要配置好babel-loader來(lái)加載那些使用了ES6語(yǔ)法的js文件巍棱；換句話(huà)說(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

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ù)：

preset參數(shù)：babel-preset-es2015-loose

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

cacheDirectory參數(shù)

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秒半了棒棒噠块饺。

plugins參數(shù)

雖說(shuō)一個(gè)preset已經(jīng)包括N個(gè)plugin了，但總有一些漏網(wǎng)之魚(yú)是要專(zhuān)門(mén)加載的雌芽。這里我只用到了transform-runtime授艰，這個(gè)plugin的效果是：不用這plugin的話(huà)，babel會(huì)為每一個(gè)轉(zhuǎn)換后的文件（在webpack這就是每一個(gè)chunk了）都添加一些輔助的方法（僅在需要的情況下）世落；而如果用了這個(gè)plugin淮腾，babel會(huì)把這些輔助的方法都集中到一個(gè)文件里統(tǒng)一加載統(tǒng)一管理，算是一個(gè)減少冗余屉佳，增強(qiáng)性能的優(yōu)化項(xiàng)吧谷朝，用不用也看自己需要了；如果不用的話(huà)武花，前面也不需要安裝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)
• webpack多頁(yè)應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些专钉？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟累铅，怎么兼容跃须？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（五）：聽(tīng)說(shuō)webpack連less/css也能打包？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包娃兽？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（七）：開(kāi)發(fā)環(huán)境菇民、生產(chǎn)環(huán)境傻傻分不清楚？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6投储！webpack怎么整合Babel第练？
• webpack多頁(yè)應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll轻要，實(shí)現(xiàn)webpack音速編譯
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng)
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼复旬！多項(xiàng)目共用基礎(chǔ)設(shè)施
• webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

本文首發(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