webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？

gnehc 發(fā)布于2019-08-20 11:14 / 2286人閱讀

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

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

前言

一直以來，我對ES6都不甚感興趣，一是因為在生產環(huán)境中使用ES5已是處處碰壁，其次則是只當這ES6是語法糖不曾重視。只是最近學習react生態(tài)，用起babel來轉換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學習。這一學習，便覺得這語法糖實在是甜，忍不住嘗鮮，于是記錄部分自覺對自己有用的方法在此。

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

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

用到哪些npm包？

首先要說到的是babel-loader，這是webpack整合Babel的關鍵，我們需要配置好babel-loader來加載那些使用了ES6語法的js文件；換句話說，那些本來就是ES5語法的文件，其實是不需要用babel-loader來加載的，用了也只會浪費我們編譯的時間。

然后就是babel相關的npm包，其中包括：

babel-core，babel的核心，沒啥好說的。

babel-preset-es2015-loose，babel的preset（相當于是一整套plugin）。babel是有許多preset的，看自己需要來選用，比如說我只管ES6（ES2016）語法的就可以用babel-preset-es2015或babel-preset-es2015-loose。這倆preset其實用法一樣，差別就在于：

許多Babel的插件有兩種模式：

盡可能符合ECMAScript6語義的normal模式和提供更簡單ES5代碼的loose模式。

優(yōu)點：生成的代碼可能更快，對老的引擎有更好的兼容性，代碼通常更簡潔，更加的“ES5化”。

缺點：你是在冒險——隨后從轉譯的ES6到原生的ES6時你會遇到問題。

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

babel-plugin-transform-runtime和babel-runtime，這屬于優(yōu)化項，不用也沒啥問題，下文會細說。

如何配置babel-loader

babel-loader的配置并不復雜，與其它loader并無二致：

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

下面來詳細解釋此配置：

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

exclude: /node_modules|vendor|bootstrap/，上文已經說到了，不需要用babel來加載的文件還是剔除掉，否則會大量增加編譯的時間，一般我們只用babel編譯我們自己寫的應用代碼。

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

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

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

cacheDirectory參數(shù)

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

plugins參數(shù)

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

示例代碼

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

附系列文章目錄（同步更新）

webpack多頁應用架構系列（一）：一步一步解決架構痛點：https://segmentfault.com/a/1190000006843916

webpack多頁應用架構系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？：https://segmentfault.com/a/1190000006871991

webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應用架構系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應用架構系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應用架構系列（七）：開發(fā)環(huán)境、生產環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

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

webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應用架構系列（十一）：預打包Dll，實現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板:https://segmentfault.com/a/1190000007126268

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

webpack多頁應用架構系列（十四）：No復制粘貼！多項目共用基礎設施

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

webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80468.html

webpack多頁應用架構系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼

摘要：本文首發(fā)于的技術博客實用至上，非經作者同意，請勿轉載。如果你使用了，或類似的，那么，通過編譯前后的代碼相差就很大了，這會造成兩個問題以為例把你的代碼轉成什么樣你自己是無法控制的，這往往導致無法通過的審查。本文首發(fā)于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 評論0 收藏0
webpack多頁應用架構系列（一）：一步一步解決架構痛點

摘要：本文首發(fā)于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當前流行的構建工具來設計一個多頁應用的架構。本文首發(fā)于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006843916如果您對本系列文章...

Lowky 2019-08-20 10:50 評論0 收藏0
webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？

摘要：在上一篇文章多頁應用架構系列二配置常用部分有哪些中，我介紹了如何配置多頁應用的入口，然而，如果僅僅如此操作，帶來的后果就是，打包生成出來的每一個入口文件都會完整包含所有代碼。的初始化常用參數(shù)有哪些，給這個包含公共代碼的命個名唯一標識。本文首發(fā)于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 評論0 收藏0
webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap

摘要：我個人慣用的是，因此本文以為例來介紹如何打造一個自定義的。引入全局的方法請看我之前的這篇文章多頁應用架構系列四老式插件還不能丟，怎么兼容，我的腳手架項目也是使用的這套方案。本文首發(fā)于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007043716如果您對本系列文章感興趣，歡迎關注訂閱...

jindong 2019-08-20 11:24 評論0 收藏0
webpack多頁應用架構系列（十一）：預打包Dll，實現(xiàn)webpack音速編譯

摘要：本文首發(fā)于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言書承上文多頁應用架構系列十如何打造一個自定義的。終于，發(fā)現(xiàn)了這一大殺器，打包時間過長的問題得到完美解決。本文首發(fā)于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 評論0 收藏0