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

dingding199389 發布于2019-08-20 11:20 / 3219人閱讀

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

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

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

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

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

如果你有以上問題，ESLint幫到你！[手動滑稽]

ESLint的用途是？

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

審查代碼是否符合編碼規范和統一的代碼風格；

審查代碼是否存在語法錯誤；

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

本文主要講什么？

本文著重介紹如何在webpack里整合進ESLint，而并不介紹ESLint本身，因此，對于沒有使用過ESLint的小伙伴，請先去自己入門一下啦。

webpack如何整合ESLint？

這次我們需要使用到eslint-loader，先放出配置的代碼：

/* 這是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的配置。

為嘛把eslint-loader放在preLoaders而不是loaders里？

理論上來說放loaders里也無傷大雅，但放preLoaders里有以下好處：

放在preLoader是先于loader的，因此當ESLint審查到問題報了warning/error的時候就會停掉，可以稍微省那么一點點時間吧大概[手動滑稽]。

如果你使用了babel，或類似的loader，那么，通過webpack編譯前后的代碼相差就很大了，這會造成兩個問題（以babel為例）：

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）。

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

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多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？: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，實現webpack音速編譯:https://segmentfault.com/a/1190000007104372

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

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

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

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

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

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

GPU云服務器云服務器想害朕多頁應用構建多頁應用架構之坑系列

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

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

webpack多頁應用架構系列（一）：一步一步解決架構痛點

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

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

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

oliverhuang 2019-08-22 10:37 評論0 收藏0
webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。只是最近學習生態，用起來轉換之余，也不免碰到諸多用上的教程案例，因此便稍作學習。在當前的瀏覽器市場下，想在生產環境用上，是必不可少的。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006992218如果您對本系列文章感興...

gnehc 2019-08-20 11:14 評論0 收藏0
webpack多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？

摘要：開發環境和生產環境都擁有的配置，但在細節上有所不同，比如說，又比如說中的和參數。更重要的是，實際上開發環境和生產環境的配置文件的絕大部分都是一致的，對于這一致的部分來說，我們堅決要消除冗余，否則后續維護起來不僅麻煩，而且還容易出錯。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/11900...

paulquei 2019-08-20 11:09 評論0 收藏0
webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。怎么來兼容老式插件呢方法有不少，下面一個一個來看。與上述的方案相反，此方案是先用加載的滿足老式插件的需要，再通過將其轉換成符合模塊化要求的。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006887523如果您對本系列文...

Chao 2019-08-22 10:38 評論0 收藏0