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

時間 2019-11-05

標籤 webpack 多頁應用架構系列總有刁民 eslint 爲你阻擊垃圾代碼欄目系統架構简体版

原文原文鏈接

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

前言

刁民，還不退下？啊……來人啊快救駕！

你所在的團隊裏有沒有「老鼠屎」？就是專門寫各類看起來溜得飛起但實際上晦澀難懂的代碼？又或是縮進換行亂成一團？javascript

你寫代碼是否是特粗心？常常落下些語法錯誤，debug起來想死？css

若是你有以上問題，ESLint幫到你！[手動滑稽]前端

ESLint的用途是？

從上面兩個應用場景，你大概已經猜到ESLint是用來幹什麼的了：java

審查代碼是否符合編碼規範和統一的代碼風格；
審查代碼是否存在語法錯誤；

語法錯誤好說，編碼規範和代碼風格如何審查呢？ESLint定義好了一大堆規則做爲可配置項;同時，一些大公司會開源出來他們使用的配置（好比說airbnb），你能夠在某套現成配置的基礎上進行修改，修改爲適合大家團隊使用的編碼規範和代碼風格。node

本文主要講什麼？

本文着重介紹如何在webpack裏整合進ESLint，而並不介紹ESLint自己，所以，對於沒有使用過ESLint的小夥伴，請先去本身入門一下啦。webpack

webpack如何整合ESLint？

此次咱們須要使用到eslint-loader，先放出配置的代碼：git

/* 這是webpack配置文件的內容，省略無關部分 */
{
  module: {
    preLoaders: [{
      test: /\.js$/, // 只針對js文件
      loader: 'eslint', // 指定啓用eslint-loader
      include: dirVars.srcRootDir, // 指定審查範圍僅爲本身團隊寫的業務代碼
      exclude: [/bootstrap/], // 剔除掉不須要利用eslint審查的文件
    }],
  },
  eslint: {
    configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), // 指定eslint的配置文件在哪裏
    failOnWarning: true, // eslint報warning了就終止webpack編譯
    failOnError: true, // eslint報error了就終止webpack編譯
    cache: true, // 開啓eslint的cache，cache存在node_modules/.cache目錄裏
  }
}

接下來解釋一下這份eslint-loader的配置。github

爲嘛把eslint-loader放在`preLoaders`而不是`loaders`裏？

理論上來講放loaders裏也無傷大雅，但放preLoaders裏有如下好處：web

放在preLoader是先於loader的，所以當ESLint審查到問題報了warning/error的時候就會停掉，能夠稍微省那麼一點點時間吧大概[手動滑稽]。
若是你使用了babel，或相似的loader，那麼，經過webpack編譯先後的代碼相差就很大了，這會形成兩個問題（以babel爲例）：bootstrap
- babel把你的代碼轉成什麼樣你本身是沒法控制的，這每每致使沒法經過ESLint的審查。
- 咱們實際上並不關心編譯後生成的代碼，咱們只須要管好咱們本身手寫的代碼便可，反正誰也不會沒事去讀讀編譯後的代碼吧？

如何傳參給eslint-loader？

從eslint-loader官方文檔能夠看出，eslint-loader的配置仍是比較多也比較複雜的，所以採用了獨立的一個配置項eslint（跟module同級哈）。

總結

只要你能在本身團隊裏成功推行ESLint，那麼最起碼，你能夠放心不用再看到那些奇奇怪怪的代碼了，由於，它們都編譯不經過吶哈哈哈哈哈……

後話

經過webpack整合ESLint，咱們能夠保證編譯生成的代碼都是沒有語法錯誤且符合編碼規範的；但在開發過程當中，等到編譯的時候才察覺到問題可能也是太慢了點兒。

所以我建議能夠把ESLint整合進編輯器或IDE裏，像我本人在用Sublime Text 3的，就可使用一個名爲SublimeLinter的插件，一寫了有問題的代碼，就立刻會標識出來，以下圖所示：

示例代碼

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

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

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