【Bun中文文档-Bundler】Loaders

360 阅读4分钟

Bun 打包工具实现了一组默认的加载器,可以直接使用。通常情况下,Bun 打包工具和运行时都默认支持相同的文件类型。

以下是 Bun 打包工具支持的默认文件类型列表:

  • .js
  • .cjs
  • .mjs
  • .mts
  • .cts
  • .ts
  • .tsx
  • .jsx
  • .toml
  • .json
  • .txt
  • .wasm
  • .node

Bun 使用文件扩展名来确定应使用哪个内置加载器(loader)来解析文件。每个加载器都有一个名称,例如jstsxjson。这些名称在构建插件时用于扩展 Bun 并添加自定义加载器。

以下是内置加载器的详细信息:

js

JavaScript 加载器。默认用于.cjs.mjs文件。

解析代码并应用一组默认的转换,例如死代码消除、树抖动和内联环境变量。请注意,目前 Bun 不会尝试降级转换的语法。

jsx

JavaScript + JSX 加载器。默认用于.js.jsx文件。

js加载器相同,但支持 JSX 语法。默认情况下,JSX 将被降级为纯 JavaScript;具体的降级方式取决于您的tsconfig.json中的jsx*编译器选项。有关更多信息,请参阅 TypeScript 文档中的JSX 部分

ts

TypeScript 加载器。默认用于.ts.mts.cts文件。

删除所有 TypeScript 语法,然后与js加载器表现相同。Bun 不执行类型检查。

tsx

TypeScript + JSX 加载器。默认用于.tsx文件。将 TypeScript 和 JSX 都转译为纯粹的 JavaScript。

json

JSON 加载器。默认用于.json文件。

可以直接导入 JSON 文件。

import pkg from "./package.json";
pkg.name; // => "my-package"

在打包过程中,解析的 JSON 将作为 JavaScript 对象内联到捆绑包中。

var pkg = {
  name: "my-package",
  // ... 其他字段
};
pkg.name;

如果将.json文件作为入口点传递给打包工具,它将被转换为一个.js模块,该模块将解析的对象导出为默认值。

toml

TOML 加载器。默认用于.toml文件。

可以直接导入 TOML 文件。Bun 将使用其快速的本机 TOML 解析器解析它们。

import config from "./bunfig.toml";
config.logLevel; // => "debug"

在打包过程中,解析的 TOML 将作为 JavaScript 对象内联到捆绑包中。

var config = {
  logLevel: "debug",
  // ... 其他字段
};
config.logLevel;

如果将.toml文件作为入口点传递,它将被转换为一个.js模块,该模块将解析的对象导出为默认值。

text

文本加载器。默认用于.txt文件。

文本文件的内容将被读取并内联到捆绑包中作为字符串。 文本文件可以直接导入。文件将被读取并作为字符串返回。

import contents from "./file.txt";
console.log(contents); // => "Hello, world!"

在构建过程中,文件的内容将内联到捆绑包中作为字符串。

var contents = `Hello, world!`;
console.log(contents);

如果将.txt文件作为入口点传递,它将被转换为一个.js模块,该模块将文件内容导出为默认值。

wasm

WebAssembly 加载器。默认用于.wasm文件。

在运行时,可以直接导入 WebAssembly 文件。该文件将被读取并返回为WebAssembly.Module

import wasm from "./module.wasm";
console.log(wasm); // => WebAssembly.Module

在打包工具中,.wasm文件将使用file加载器处理。

napi

本机插件加载器。默认用于.node文件。

在运行时,可以直接导入本机插件。

import addon from "./addon.node";
console.log(addon);

在打包工具中,.node文件将使用file加载器处理。

file

文件加载器。默认用于所有未识别的文件类型。

文件加载器将导入解析为到导入的文件的路径/URL。通常用于引用媒体或字体资源。

import logo from "./logo.svg";
console.log(logo);

在运行时,Bun 检查logo.svg文件是否存在,并将其转换为logo.svg在磁盘上的位置的绝对路径。

$ bun run logo.ts
/path/to/project/logo.svg

在打包工具中,情况稍有不同。文件将按原样复制到outdir,并且导入将解析为指向复制文件的相对路径。

var logo = "./logo.svg";
console.log(logo);

如果为publicPath指定了值,导入将使用该值作为前缀来构建绝对路径/URL。

公共路径(public path)已解析的导入
""(默认值)/logo.svg
"/assets"/assets/logo.svg
"https://cdn.example.com/"https://cdn.example.com/logo.svg

复制文件的位置和文件名由naming.asset的值确定。

此加载器将按原样复制到outdir。复制文件的名称由naming.asset的值确定。

如果使用 TypeScript,可能会出现以下错误:

// TypeScript错误
// 找不到模块“./logo.svg”或其对应的类型声明。

可以通过在项目中的任何位置创建*.d.ts文件(任何名称都可以)并使用以下内容来修复此错误:

declare module "*.svg" {
  const content: string;
  export default content;
}

这告诉 TypeScript,从.svg导入的任何默认导入应该被视为字符串。