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

時間 2019-11-05

標籤 webpack 多頁應用架構系列教練 es6 怎麼整合 babel 欄目系統架構简体版

原文原文鏈接

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-flwptlfi-ds.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang

前言

一直以來，我對ES6都不甚感興趣，一是由於在生產環境中使用ES5已經是到處碰壁，其次則是隻當這ES6是語法糖未曾重視。只是最近學習react生態，用起babel來轉換jsx之餘，也難免碰到諸多用上ES6的教程、案例，所以便稍做學習。這一學習，便以爲這語法糖實在是甜，忍不住嚐鮮，因而記錄部分自覺對本身有用的方法在此。

這是我數月前的一篇文章《ES6部分方法點評（一）》中的一段，現在再看我本身的代碼，觸目皆是ES6的語法。在當前的瀏覽器市場下，想在生產環境用上ES6，Babel是必不可少的。javascript

因爲我自己只用了ES6的語法而未使用ES6的其它特性，所以本文只介紹如何利用webpack整合Babel來編譯ES6的語法，而實際上若要使用ES6的其它屬性甚至是ES7（ES2016），其實只須要引入Babel其它的preset/plugin便可，在用法上並沒有多大變化。css

用到哪些npm包？

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

而後就是babel相關的npm包，其中包括：java

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模式。node

優勢：生成的代碼可能更快，對老的引擎有更好的兼容性，代碼一般更簡潔，更加的「ES5化」。react

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

我本身的考慮是，確定要更好的兼容性和更好的性能啦這還用想的嗎？（敲黑板）git

babel-plugin-transform-runtime和babel-runtime，這屬於優化項，不用也沒啥問題，下文會細說。

如何配置babel-loader

babel-loader的配置並不複雜，與其它loader並沒有二致：es6

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

下面來詳細解釋此配置：github

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並傳入所需參數，這些參數其實也是能夠經過babel配置文件.babelrc，不過我仍是推薦在這裏以參數的方式傳入。下面來介紹這些參數：

preset參數：`babel-preset-es2015-loose`

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

cacheDirectory參數

cacheDirectory參數默認爲false，若你設置爲一個文件目錄路徑（表示把cache存到哪），或是保留爲空（表示操做系統默認的緩存目錄），則至關於開啓cache。這裏的cache指的是babel在編譯過程當中某些能夠緩存的步驟，具體是什麼我也不太清楚，反正是隻要開啓了cache就能夠加快webpack總體編譯速度。我測試了一下，未開啓cache的時候個人腳手架項目(Array-Huang/webpack-seed)須要15秒半來編譯；而開啓cache後的第一次編譯時間並無減小，第二次編譯則變爲14秒了，足足減小了1秒半了棒棒噠。

plugins參數

雖然說一個preset已經包括N個plugin了，但總有一些漏網之魚是要專門加載的。這裏我只用到了transform-runtime，這個plugin的效果是：不用這plugin的話，babel會爲每個轉換後的文件（在webpack這就是每個chunk了）都添加一些輔助的方法（僅在須要的狀況下）；而若是用了這個plugin，babel會把這些輔助的方法都集中到一個文件裏統一加載統一管理，算是一個減小冗餘，加強性能的優化項吧，用不用也看本身須要了；若是不用的話，前面也不須要安裝babel-plugin-transform-runtime和babel-runtime了。

示例代碼

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

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

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-flwptlfi-ds.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang