前端开发中我们使用 Eslint 对 JavaScript 代码进行规范化检测，可以帮助我们发现潜在的问题，并使代码风格更加统一。然而，在大型项目中，随着代码量的增加，Eslint 校验时间也会变得越来越长，严重影响开发效率。本文将介绍如何通过 webpack 优化构建时的 Eslint 校验问题。
Eslint 和 webpack
在介绍如何优化 Eslint 校验前，我们需要了解一些 Eslint 和 webpack 的概念。
Eslint
Eslint 是一个用于识别和报告 ECMAScript/JavaScript 代码中的模式的工具。我们可以通过 Eslint 来规范化我们的代码，防止代码风格的混乱，以及发现潜在的问题。
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。通过 webpack，我们可以将应用程序拆分成小块，并按照依赖关系将它们打包成静态资源。Webpack 还可以通过插件机制，进行代码转换、压缩等多种操作。
Eslint 耗时问题
大型项目中，Eslint 校验时间是一个很大的问题。这主要有两个原因：
- Eslint 校验的 JavaScript 代码量过大；
- Eslint 插件校验过于严格。
这些因素都会导致 Eslint 校验的时间增加，从而影响开发效率。
优化 Eslint 校验
为了优化 Eslint 校验，我们可以通过 webpack 进行配置。实际上，webpack 本身就自带了一个用于 Eslint 校验的插件，即 eslint-webpack-plugin。
安装插件
我们可以通过 npm 安装插件：
npm install --save-dev eslint-webpack-plugin
配置
在 webpack 配置文件中，我们配置 eslint-webpack-plugin 插件：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
-- ----------- -------- --------
------------ -----
-- ---- ------ ---- ------ ------
---- -----
-- ------ ------------- ----
------ ----------------- -----------------
---
-- ---
--
-- ---
-这里介绍几个常用的配置项：
| 配置项 | 说明 |
|---|---|
failOnError |
在构建出现错误时，使用 notifier 插件进行屏幕提醒 |
fix |
自动修复 Eslint 错误（即 eslint --fix） |
files |
Eslint 检查文件的路径，也可以是个 glob |
formatter |
格式化 Eslint 输出。默认使用 eslint/lib/cli-engine/formatters/stylish |
eslintPath |
指定 Eslint 模块路径，默认为 require.resolve('eslint')。如果项目本身有安装 Eslint 模块，可以配置此项使插件使用项目下的 Eslint 模块 |
context |
指定 Eslint 运行的主目录，默认为 webpack.config.js 所在目录 |
extensions |
指定 Eslint 支持的文件扩展名，默认为 ['.js', '.jsx', '.ts', '.tsx'] |
exclude |
指定 Eslint 忽略的文件或目录，默认为 ['node_modules'] |
cache |
启用 Eslint 缓存，可以加快 Eslint 检查的速度，特别是在大型项目中。默认为 false。 |
cacheLocation |
指定 Eslint 缓存路径，默认为 path.resolve('.cache/eslint') |
parallel |
启用 Eslint 并行处理，默认为 true。开启并行处理可以加快 Eslint 检查的速度 |
formatterError |
自定义错误格式化。默认使用 error => error.message + '\n\n' + error.source。 |
总结
通过以上的配置，我们可以优化 Eslint 校验时间，大大提高项目开发效率。当然，对于 Eslint 校验的规则和插件的使用，也需要我们深入学习和了解，才能更好地规范化我们的代码。
示例代码
本文以 Vue.js 项目为例，示范如何优化 Eslint 校验。
.eslintrc.js
-- -------------------- ---- -------
-- ------------
-------------- - -
----- -----
---- -
----- -----
--
-------- -
-----------------------
---------------
--
-------------- -
------- ---------------
--
------ -
------------- -------------------- --- ------------ - ------- - ------
-------------- -------------------- --- ------------ - ------- - ------
--------------------------- -----
-
-vue.config.js
-- -------------------- ---- -------
-- -------------
----- ------------------- - --------------------------------
-------------- - -
----------------- -
-------- -
--- ---------------------
-- -- ------ - ------ -----
------------ -----
------------ -----
---- -----
------ ----------------- -----------------
--
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2741548841e9894eaa954