随着 TypeScript 的流行，越来越多的前端开发者开始使用它来开发 Web 应用。在 TypeScript 开发过程中，我们经常会用到 TSLint 工具来检测代码风格和潜在问题。然而，在使用 TSLint 时，经常会遇到一些问题，比如与 Webpack 集成时的一些问题。这时候，npm 包 old-tslint-loader 就能发挥它的作用了。它是一个用于 Webpack 的 TSLint 加载器，可以让我们轻松地在 Webpack 中集成 TSLint，这样我们就可以在打包过程中自动执行 TSLint，从而保证代码质量和一致性。
安装和使用
使用 old-tslint-loader 很简单，只需要在项目中安装它并进行一些简单的配置即可。以下是详细步骤：
- 安装 old-tslint-loader
npm install old-tslint-loader --save-dev
- 在 Webpack 配置中添加该加载器
在 webpack.config.js 中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ------
---- -
-------------------
-
--
-- ---
-
-
--这段代码的意思是，在加载 .ts 文件之前，先使用 old-tslint-loader 对其进行检查。如需禁止某些文件进行检查，可以使用 exclude 参数：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ------
---- -
-------------------
--
-------- --------------
--
-- ---
-
-
--这段代码的意思是，排除所有 node_modules 目录下的 .ts 文件不进行检查。
- 修改 TSLint 配置文件（可选）
old-tslint-loader 同样需要 TSLint 配置文件，所以你需要在项目根目录下添加一个 tslint.json 文件。此外，还需要在 tsconfig.json 中添加一个 tslint 校验器：
-- -------------------- ---- -------
-
------------------ -
--------- -----------
---------------- -----
----------------- -----
--------------------- -----
------------ ----
--
-------- -
----------------
--
------- -
------------------ ----------
-------- --
-
-在上面的代码中，"compilerOptions" 是 TypeScript 编译器的配置项，"files" 是项目的入口文件。"lint" 部分是 TSLint 的配置，"defaultSeverity" 表示默认的问题级别，"rules" 是指要启用的检查规则。
- 运行 Webpack
现在，你已经将 old-tslint-loader 集成到了 Webpack 中，可以使用 Webpack 运行你的项目，进而自动进行 TSLint 校验了。在 console 中查看结果即可。
示例代码
-- -------------------- ---- -------
---
- ----- --- --- ------
- ------------ ------------------ ----------------- ------
--
-- ----
------ -------------
-- ----
------ - -- ------- ---- ----------
------ - ---------------- - ---- ------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ---------
------ - -------------- - ---- ----------
-- -- ------- ----
----- ---- ---------- - --------------------- -
------------ -- ---
------------ -- ---
------------- -- ---- ---
-------------- -- ------- --- -
-------- -- ---
---
-- ----
-------------------- --- ----------------
--------------------- --- -----------------
---------------------- --- ------------------
-- ----
----------------------------- --------------------- ---------------- --------------------- ------------------- ------------------------- -- -
---------------------------------------------
----------------------------------
----
---------------------- ---------- ----------- ------------ --------------------- -------- ------------------ --------- ------------------- -- -
-------------------- ---------
-- ----
------------------------------------- ------- -------- -- -
------------------- ----- -- ------------------
---
----总结
本文介绍了 npm 包 old-tslint-loader 的使用方法。old-tslint-loader 可以使我们方便地集成 TSLint 到 Webpack 中，从而保证代码的质量和一致性。使用 old-tslint-loader 很简单，只需要按照本文所述的步骤进行配置就可以了。希望这篇文章对您有所帮助，并能够帮助您更好地理解 TSLint 工具及其与 Webpack 的集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fae3d1de16d83a67281