模块类型
致读者
本译文在忠于原文的基础上,融入了译者基于自身领域知识所添加的解释性内容和本地化表达。这些精心添加的内容旨在增进读者对原文核心信息的理解。如对内容有任何疑问,欢迎您参与评论区讨论,或查阅原文以作参考。
作为一个 web
打包工具,JavaScript
并非 Rolldown
中唯一具有 内置支持的文件类型。例如,Rolldown
可以直接处理 TypeScript
和 JSX
文件,在打包前将它们解析并转换为 JavaScript
。我们将这些在 Rolldown
中具有 一级支持 的文件类型称为模块类型(Module Types
)。
模块类型如何影响用户
终端用户通常不需要关心模块类型,因为 Rolldown
会 自动识别 并处理已知的模块类型。
默认情况下,Rolldown
根据 文件扩展名 确定模块的类型。然而,在某些情况下这可能不够充分。例如,想象一个包含 JSON
数据的文件,但其扩展名为 .data
。Rolldown
无法通过文件扩展名将其识别为 JSON
文件,因为扩展名不是 .json
。
在这种情况下,用户需要 明确 告诉 Rolldown
具有 .data
扩展名的文件应被视为 JSON
模块类型。这可以通过配置中的 moduleTypes
选项完成:
export default {
moduleTypes: {
'.data': 'json'
}
};
模块类型和插件
插件可以通过 load
钩子和 transform
钩子指定特定文件的 模块类型:
const myPlugin = {
load(id) {
if (id.endsWith('.data')) {
return {
code: '...',
moduleType: 'json'
};
}
}
};
模块类型的主要意义在于他为支持的类型提供了一个中心化的约定,使得需要在同一模块类型上操作的多个插件能够更容易地链式调用。
例如,@vitejs/plugin-vue
目前为 .vue
文件中的样式块创建虚拟 CSS
模块,并向虚拟模块的 ID
附加 ?lang=css
,使这些模块能被 Vue
插件识别为 CSS
。然而,这仅仅是 Vue
插件的约定 - 其他插件可能会忽略查询字符串,因此无法识别这种约定。
通过模块类型,@vitejs/plugin-vue
可以明确将虚拟 CSS
模块的模块类型指定为 css
,而其他插件(如 PostCSS
插件)可以处理这些 CSS
模块,而无需了解 Vue
插件。
另一个例子:为了添加对 .jsonc
文件的支持,插件可以简单地在 load
钩子中去除 .jsonc
文件的注释,并返回 moduleType: 'json'
,后续 Rolldown
就可以按照 json
的模式来解析这个模块。