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 의 기본값.
코드를 파싱하고 데드 코드 제거 및 트리 쉐이킹과 같은 일련의 기본 변환을 적용합니다. 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 객체로 번들에 인라인됩니다.
const 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 은 이들을 파싱하여 주석과 후행 쉼표를 제거합니다.
import config from "./config.jsonc";
console.log(config);번들링 중 파싱된 JSONC 는 json 로더와 동일하게 JavaScript 객체로 번들에 인라인됩니다.
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);NOTE
번들러에서 `.node` 파일은 파일 로더를 사용하여 처리됩니다.sqlite
SQLite 로더. with { "type": "sqlite" } 가져오기 속성 필요.
런타임과 번들러에서 SQLite 데이터베이스를 직접 가져올 수 있습니다. 이는 bun:sqlite 를 사용하여 데이터베이스를 로드합니다.
import db from "./my.db" with { type: "sqlite" };기본적으로 데이터베이스는 번들 외부에 있으므로 (다른 곳에서 로드된 데이터베이스를 potentially 사용할 수 있도록) 디스크 상의 데이터베이스 파일은 최종 출력에 번들링되지 않습니다.
"embed" 속성으로 이 동작을 변경할 수 있습니다:
// 데이터베이스를 번들에 임베드
import db from "./my.db" with { type: "sqlite", embed: "true" };html
HTML 로더. .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 을 사용하여 스크립트 및 링크 태그를 진입점으로, 기타 자산을 외부로 추출합니다.
지원되는 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 은 모든 자산이 번들링되고 해시된 정적 사이트를 생성합니다. - 런타임:
bun run server.ts를 실행할 때 (여기서server.ts가 HTML 파일을 가져옴) Bun 은 개발 중 실시간으로 자산을 번들링하여 핫 모듈 교체와 같은 기능을 활성화합니다. - 풀스택 빌드:
bun build --target=bun server.ts를 실행할 때 (여기서server.ts가 HTML 파일을 가져옴) 가져오기는Bun.serve가 프로덕션에서 사전 번들링된 자산을 효율적으로 제공하는 데 사용하는 매니페스트 객체로 해결됩니다.
css
CSS 로더. .css 의 기본값.
CSS 파일을 직접 가져올 수 있습니다. 번들러는 CSS 파일을 파싱하고 번들링하며 @import 문과 url() 참조를 처리합니다.
import "./styles.css";번들링 중 가져온 모든 CSS 파일은 출력 디렉토리의 단일 .css 파일로 함께 번들링됩니다.
.my-class {
background: url("./image.png");
}sh
Bun Shell 로더. .sh 파일의 기본값.
이 로더는 Bun Shell 스크립트를 파싱하는 데 사용됩니다. Bun 자체를 시작할 때만 지원되므로 번들러나 런타임에서는 사용할 수 없습니다.
bun run ./script.shfile
파일 로더. 인식할 수 없는 모든 파일 타입의 기본값.
파일 로더는 가져오기를 가져온 파일에 대한 경로/URL 로 해결합니다. 미디어 또는 폰트 자산을 참조하는 데 일반적으로 사용됩니다.
// logo.ts
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 를 구성하기 위해 이 값을 접두사로 사용합니다.
| 공개 경로 | 해결된 가져오기 |
|---|---|
"" (기본값) | /logo.svg |
"/assets" | /assets/logo.svg |
"https://cdn.example.com/" | https://cdn.example.com/logo.svg |
NOTE
복사된 파일의 위치와 파일 이름은 `naming.asset` 의 값에 의해 결정됩니다.이 로더는 그대로 outdir 에 복사됩니다. 복사된 파일의 이름은 naming.asset 의 값을 사용하여 결정됩니다.