@types/loader-utils 是一个 npm 包，用于为 webpack loader 编写 TypeScript 类型声明。如果你正在使用 webpack 并且正在为其编写自己的 loader，那么这个 npm 包可以为你提供非常大的帮助。
什么是 webpack loader
在讲解 @types/loader-utils 的使用之前，先来快速了解一下什么是 webpack loader。
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包括应用程序需要的每个模块。对于每个依赖项，webpack 找到一个处理程序，它可以是特定于语言的编译器、loader，或者更特定于 webpack 的任何其他类型的处理程序。
webpack loader 的主要作用是将我们需要处理的源代码经过一系列转换后输出处理后的结果供 webpack 继续处理。一个经典的 webpack loader 配置如下：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------- -- --- --- --------- ------ --
---- --------------- -- ----- ----- --
--
--
--
--使用 @types/loader-utils
在编写 webpack loader 的时候，我们通常需要处理一些输入参数以及输出结果，这时候往往最好是配合使用 @types/loader-utils 包来为我们的 loader 提供完整的 TypeScript 类型支持。
@types/loader-utils 向我们提供了三个非常重要的函数：
- parseQuery：可以将 loader 配置中的查询参数（例如
?query）解析成对应的 JavaScript 对象。 - stringifyRequest：将 webpack 的原始请求转换成可用于 eval 函数的字符串。
- getOptions：从 webpack 配置中的 loader 选项或者相应的默认选项中提取一个选项对象。
下面我们以一个简单的例子来演示如何使用 @types/loader-utils。
假设我们正在编写一个简单的 loader，用于将一个 JSON 文件中的内容转换为 TypeScript 类型声明。代码如下：
const { compile } = require('json-schema-to-typescript');
const { getOptions } = require('loader-utils');
module.exports = async function(source) {
const options = getOptions(this);
const ts = await compile(JSON.parse(source), options);
return 'export default ' + ts;
};这个简单的 loader 首先获取了通过 webpack 配置传递进来的选项，然后使用 json-schema-to-typescript 库将读取的 JSON 代码转换为 TypeScript 类型定义。最后，我们将生成的 TypeScript 代码添加上 export default，并将其返回。
在这个例子中，我们使用了 @types/loader-utils 提供的 getOptions 函数，这样我们的 loader 就可以接收来自 webpack 配置的选项了。
总结
@types/loader-utils 是一个非常好用的 npm 包，它可以帮助我们编写更加高质量的 webpack loader。通过使用这个包，我们可以获取许多有用的工具函数，提高我们的工作效率和代码质量。当你需要编写自己的 loader 时，一定要考虑使用 @types/loader-utils 来增强你的 loader，让它更加健壮和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184246