webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码

dingding199389 发布于2019-08-20 11:20 / 3225人阅读

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。如果你使用了，或类似的，那么，通过编译前后的代码相差就很大了，这会造成两个问题以为例把你的代码转成什么样你自己是无法控制的，这往往导致无法通过的审查。

本文首发于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云服务器云服务器想害朕多页应用构建多页应用架构之坑系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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