Bun 번들러는 기본적으로 일련의 로더를 구현합니다. 원칙적으로 번들러와 런타임은 기본적으로 동일한 파일 타입 세트를 지원합니다.
.js .cjs .mjs .mts .cts .ts .tsx .jsx .css .json .jsonc .toml .yaml .yml .txt .wasm .node .html .sh
Bun 은 파일 확장자를 사용하여 파일을 파싱하는 데 사용할 내장 로더 를 결정합니다. 모든 로더는 js, tsx, json 과 같은 이름을 가지며, 이 이름은 Bun 을 확장하는 플러그인 을 빌드할 때 사용됩니다.
'type' 임포트 속성을 사용하여 사용할 로더를 명시적으로 지정할 수 있습니다.
import my_toml from "./my_file" with { type: "toml" };
// 또는 동적 임포트 사용
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });내장 로더
js
JavaScript. .cjs 및 .mjs 의 기본 로더.
코드를 파싱하고 dead-code 제거 및 tree shaking 과 같은 일련의 기본 변환을 적용합니다. Bun 은 현재 구문 다운 컨버전을 시도하지 않습니다.
jsx
JavaScript + JSX. .js 및 .jsx 의 기본 로더.
js 로더와 동일하지만 JSX 구문이 지원됩니다. 기본적으로 JSX 는 일반 JavaScript 로 다운 컨버트되며, 이 방식은 tsconfig.json 의 jsx* 컴파일러 옵션에 따라 달라집니다. 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 파일이 번들러의 엔트리포인트로 전달되면 파싱된 객체를 export default 하는 .js 모듈로 변환됩니다.
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};jsonc
주석이 있는 JSON 로더. .jsonc 의 기본 로더.
JSONC(주석이 있는 JSON) 파일을 직접 임포트할 수 있습니다. Bun 은 주석과 trailing comma 를 제거하고 파싱합니다.
import config from "./config.jsonc";
console.log(config);번들링 중에는 파싱된 JSONC 가 JavaScript 객체로 번들에 인라인되며 json 로더와 동일합니다.
var config = {
option: "value",
};NOTE
Bun 은 `tsconfig.json`, `jsconfig.json`, `package.json`, `bun.lock` 파일에 대해 자동으로 `jsonc` 로더를 사용합니다.toml
TOML 로더. .toml 의 기본 로더.
TOML 파일을 직접 임포트할 수 있습니다. Bun 은 빠른 네이티브 TOML 파서로 파싱합니다.
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// 임포트 속성으로 사용:
// import myCustomTOML from './my.config' with {type: "toml"};번들링 중에는 파싱된 TOML 이 JavaScript 객체로 번들에 인라인됩니다.
var config = {
logLevel: "debug",
// ...기타 필드
};
config.logLevel;.toml 파일이 엔트리포인트로 전달되면 파싱된 객체를 export default 하는 .js 모듈로 변환됩니다.
name = "John Doe"
age = 35
email = "johndoe@example.com"export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};yaml
YAML 로더. .yaml 및 .yml 의 기본 로더.
YAML 파일을 직접 임포트할 수 있습니다. Bun 은 빠른 네이티브 YAML 파서로 파싱합니다.
import config from "./config.yaml";
console.log(config);
// 임포트 속성으로 사용:
import data from "./data.txt" with { type: "yaml" };번들링 중에는 파싱된 YAML 이 JavaScript 객체로 번들에 인라인됩니다.
var config = {
name: "my-app",
version: "1.0.0",
// ...기타 필드
};.yaml 또는 .yml 파일이 엔트리포인트로 전달되면 파싱된 객체를 export default 하는 .js 모듈로 변환됩니다.
name: John Doe
age: 35
email: johndoe@example.comexport default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};text
텍스트 로더. .txt 의 기본 로더.
텍스트 파일의 콘텐츠가 읽혀져 문자열로 번들에 인라인됩니다. 텍스트 파일을 직접 임포트할 수 있습니다. 파일이 읽혀져 문자열로 반환됩니다.
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// html 파일을 텍스트로 임포트하려면
// "type" 속성을 사용하여 기본 로더를 재정의할 수 있습니다.
import html from "./index.html" with { type: "text" };빌드 중에 참조되면 콘텐츠는 문자열로 번들에 인라인됩니다.
var contents = `Hello, world!`;
console.log(contents);.txt 파일이 엔트리포인트로 전달되면 파일 콘텐츠를 export default 하는 .js 모듈로 변환됩니다.
Hello, world!export default "Hello, world!";napi
네이티브 애드온 로더. .node 의 기본 로더.
런타임에서는 네이티브 애드온을 직접 임포트할 수 있습니다.
import addon from "./addon.node";
console.log(addon);번들러에서는 .node 파일이 file 로더를 사용하여 처리됩니다.
sqlite
SQLite 로더. with { "type": "sqlite" } 임포트 속성
런타임과 번들러에서 SQLite 데이터베이스를 직접 임포트할 수 있습니다. 이는 bun:sqlite 를 사용하여 데이터베이스를 로드합니다.
import db from "./my.db" with { type: "sqlite" };이는 target 이 bun 일 때만 지원됩니다.
기본적으로 데이터베이스는 번들 외부에 있으므로 (다른 곳에서 로드된 데이터베이스를 잠재적으로 사용할 수 있도록) 디스크의 데이터베이스 파일이 최종 출력에 번들되지 않습니다.
"embed" 속성으로 이 동작을 변경할 수 있습니다:
// 데이터베이스를 번들에 임베드
import db from "./my.db" with { type: "sqlite", embed: "true" };스탠드얼론 실행 파일 을 사용할 때 데이터베이스는 단일 파일 실행 파일에 임베드됩니다.
그렇지 않으면 임베드할 데이터베이스는 해시된 파일 이름으로 outdir 에 복사됩니다.
html
html 로더는 HTML 파일을 처리하고 참조된 자산을 번들합니다. 다음을 수행합니다:
- 참조된 JavaScript 파일 번들 및 해시 (
<script src="...">) - 참조된 CSS 파일 번들 및 해시 (
<link rel="stylesheet" href="...">) - 참조된 이미지 해시 (
<img src="...">) - 외부 URL 보존 (기본적으로
http://또는https://로 시작하는 모든 것)
예를 들어 다음 HTML 파일이 주어지면:
<!DOCTYPE html>
<html>
<body>
<img src="./image.jpg" alt="로컬 이미지" />
<img src="https://example.com/image.jpg" alt="외부 이미지" />
<script type="module" src="./script.js"></script>
</body>
</html>번들된 자산과 함께 새로운 HTML 파일을 출력합니다:
<!DOCTYPE html>
<html>
<body>
<img src="./image-HASHED.jpg" alt="로컬 이미지" />
<img src="https://example.com/image.jpg" alt="외부 이미지" />
<script type="module" src="./output-ALSO-HASHED.js"></script>
</body>
</html>내부적으로 lol-html 을 사용하여 스크립트 및 링크 태그를 엔트리포인트로 추출하고 다른 자산은 외부로 처리합니다.
현재 선택자 목록은 다음과 같습니다:
audio[src]iframe[src]img[src]img[srcset]link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]link[as='font'][href], link[type^='font/'][href]link[as='image'][href]link[as='style'][href]link[as='video'][href], link[as='audio'][href]link[as='worker'][href]link[rel='icon'][href], link[rel='apple-touch-icon'][href]link[rel='manifest'][href]link[rel='stylesheet'][href]script[src]source[src]source[srcset]video[poster]video[src]
NOTE
다른 컨텍스트에서의 HTML 로더 동작
html 로더는 사용 방식에 따라 다르게 동작합니다:
정적 빌드:
bun build ./index.html을 실행하면 모든 자산이 번들되고 해시된 정적 사이트가 생성됩니다.런타임:
bun run server.ts를 실행할 때 (server.ts가 HTML 파일을 임포트하는 경우) Bun 은 개발 중에 실시간으로 자산을 번들하여 핫 모듈 교체와 같은 기능을 활성화합니다.풀스택 빌드:
bun build --target=bun server.ts를 실행할 때 (server.ts가 HTML 파일을 임포트하는 경우) 임포트는Bun.serve가 프로덕션에서 미리 번들된 자산을 효율적으로 제공하는 데 사용하는 매니페스트 객체로 해결됩니다.
css
CSS 로더. .css 의 기본 로더.
CSS 파일을 직접 임포트할 수 있습니다. 이는 주로 CSS 가 HTML 과 함께 번들되는 풀스택 애플리케이션 에서 유용합니다.
import "./styles.css";임포트에서 반환되는 값은 없으며 사이드 이펙트에만 사용됩니다.
sh 로더
Bun Shell 로더. .sh 파일의 기본 로더
이 로더는 Bun Shell 스크립트를 파싱하는 데 사용됩니다. Bun 자체를 시작할 때만 지원되므로 번들러나 런타임에서는 사용할 수 없습니다.
bun run ./script.shfile
파일 로더. 인식되지 않는 모든 파일 타입의 기본 로더.
파일 로더는 임포트를 임포트된 파일의 경로/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 |
NOTE
복사된 파일의 위치와 파일 이름은 [`naming.asset`](/ko/bundler#naming) 값에 의해 결정됩니다.TypeScript 임포트 오류 수정">
TypeScript 를 사용하는 경우 다음과 같은 오류가 발생할 수 있습니다:
// TypeScript 오류
// Cannot find module './logo.svg' or its corresponding type declarations.이는 프로젝트의 어디든 *.d.ts 파일을 생성하여 수정할 수 있습니다 (어떤 이름이든 작동합니다):
declare module "*.svg" {
const content: string;
export default content;
}이는 TypeScript 에게 .svg 의 모든 기본 임포트가 문자열로 처리되어야 함을 알려줍니다.