模块类型

¥Module Types

作为 Web 打包器，JavaScript 并非 Rolldown 中唯一内置支持的文件类型。例如，Rolldown 可以直接处理 TypeScript 和 JSX 文件，在打包之前解析并转换为 JavaScript。在 Rolldown 中，我们将这些具有一流支持的文件类型称为模块类型。

¥As a web bundler, JavaScript is not the only file type with built-in support in Rolldown. For example, Rolldown can handle TypeScript and JSX files directly, parsing and transforming them to JavaScript before bundling them. We refer to these file types with first-class support in Rolldown as Module Types.

模块类型如何影响用户

¥How module types affect users

终端用户通常无需关注模块类型，因为 Rolldown 会自动识别并处理已知的模块类型。

¥End users usually do not need to concern themselves with Module Types, since Rolldown automatically recognizes and handles known Module Types.

默认情况下，Rolldown 根据模块的文件扩展名确定其模块类型。但是，在某些情况下，这可能还不够。例如，假设一个文件包含 JSON 数据，但其扩展名为 .data。Rolldown 无法将其识别为 JSON 文件，因为扩展名不是 .json。

¥By default, Rolldown determines the module type of a module based on its file extension. However, in some cases this may not be sufficient. For example, imagine a file containing JSON data, but its extension is .data. Rolldown can't recognize it as a JSON file because the extension is not .json.

在这种情况下，用户需要明确告知 Rolldown，带有 .data 扩展名的文件应被视为 JSON 模块类型。这可以通过配置中的 moduleTypes 选项完成：

¥In this case, users need to explicitly tell Rolldown that files with the .data extension should be treated as the JSON module type. This can be done via the moduleTypes option in the config:

rolldown.config.js

export default {
  moduleTypes: {
    '.data': 'json',
  },
};

模块类型和插件

¥Module types and plugins

插件可以通过 load 钩子和 transform 钩子指定特定文件的模块类型：

¥Plugins can specify the module type of a specific file via the load hook and the transform hook:

const myPlugin = {
  load(id) {
    if (id.endsWith('.data')) {
      return {
        code: '...',
        moduleType: 'json',
      };
    }
  },
};

模块类型的主要意义在于它为受支持的类型提供了一个统一的约定，使得链接需要操作同一模块类型的多个插件变得更加容易。

¥The main significance of module types is that it provides a central convention for supported types, making it easier to chain multiple plugins that need to operate on the same module type.

例如，@vitejs/plugin-vue 目前为 .vue 文件中的样式块创建虚拟 css 模块，并将 ?lang=css 附加到虚拟模块的 ID 后，以便 vue 插件将这些模块识别为 css。然而，这只是 Vue 插件的惯例。 - 其他插件可能会忽略查询字符串，因此无法识别该约定。

¥For example, @vitejs/plugin-vue currently creates virtual css modules for the style blocks in .vue files and append ?lang=css to the id of a virtual module, allowing these modules to be recognized as css by the vue plugin. However, this is only a convention of the vue plugin - other plugins may ignore the query string and thus not recognize the convention.

使用模块类型，@vitejs/plugin-vue 可以明确指定虚拟 CSS 模块的模块类型为 css，而其他插件（例如 postcss 插件）可以在不感知 Vue 插件的情况下处理这些 CSS 模块。

¥With module types, @vitejs/plugin-vue can explicitly specify the module type of virtual css modules as css, and other plugins like the postcss plugin can process these css modules without being aware of the vue plugin.

另一个示例：为了添加对 .jsonc 文件的支持，插件可以简单地在 load 钩子中去除 .jsonc 文件的注释并返回 moduleType: 'json'。Rolldown 将处理其余部分。

¥Another example: to add support for .jsonc files, a plugin could simply strip comments of .jsonc files in the load hook and return moduleType: 'json'. Rolldown will handle the rest.