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

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