Bun Bundler by secondsky/claude-skills
npx skills add https://github.com/secondsky/claude-skills --skill 'Bun Bundler'Bun 的打包工具是一个快速的 JavaScript/TypeScript 打包器,构建在与 Bun 运行时相同的引擎之上。它是一个与 esbuild 兼容的替代方案,具有原生性能。
# 基本打包
bun build ./src/index.ts --outdir ./dist
# 生产环境构建
bun build ./src/index.ts --outdir ./dist --minify
# 多入口点
bun build ./src/index.ts ./src/worker.ts --outdir ./dist
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
});
if (!result.success) {
console.error("构建失败:", result.logs);
}
await Bun.build({
// 入口点(必需)
entrypoints: ["./src/index.ts"],
// 输出目录
outdir: "./dist",
// 目标环境
target: "browser", // "browser" | "bun" | "node"
// 输出格式
format: "esm", // "esm" | "cjs" | "iife"
// 代码压缩
minify: true, // 或 { whitespace: true, identifiers: true, syntax: true }
// 代码分割
splitting: true,
// 源码映射
sourcemap: "external", // "none" | "inline" | "external" | "linked"
// 命名模式
naming: {
entry: "[dir]/[name].[ext]",
chunk: "[name]-[hash].[ext]",
asset: "[name]-[hash].[ext]",
},
// 定义全局变量
define: {
"process.env.NODE_ENV": JSON.stringify("production"),
},
// 外部包
external: ["react", "react-dom"],
// 加载器
loader: {
".svg": "text",
".png": "file",
},
// 插件
plugins: [myPlugin],
// 根目录
root: "./src",
// 资源的公共路径
publicPath: "/static/",
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
bun build <entrypoints> [flags]
| 标志 | 描述 |
|---|---|
--outdir | 输出目录 |
--outfile | 输出单个文件 |
--target | browser, bun, node |
--format | esm, cjs, iife |
--minify | 启用代码压缩 |
--minify-whitespace | 仅压缩空白字符 |
--minify-identifiers | 仅压缩标识符 |
--minify-syntax | 仅压缩语法 |
--splitting | 启用代码分割 |
--sourcemap | none, inline, external, linked |
--external | 将包标记为外部依赖 |
--define | 定义编译时常量 |
--loader | 扩展名的自定义加载器 |
--public-path | 资源的公共路径 |
--root | 根目录 |
--entry-naming | 入口点命名模式 |
--chunk-naming | 代码块命名模式 |
--asset-naming | 资源命名模式 |
await Bun.build({
entrypoints: ["./src/index.ts"],
target: "browser",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/server.ts"],
target: "bun",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/server.ts"],
target: "node",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/index.ts", "./src/admin.ts"],
splitting: true,
outdir: "./dist",
});
共享依赖会自动提取到独立的代码块中。
| 加载器 | 扩展名 | 输出 |
|---|---|---|
js | .js, .mjs, .cjs | JavaScript |
jsx | .jsx | JavaScript |
ts | .ts, .mts, .cts | JavaScript |
tsx | .tsx | JavaScript |
json | .json | JavaScript |
toml | .toml | JavaScript |
text | - | 字符串导出 |
file | - | 文件路径导出 |
base64 | - | Base64 字符串 |
dataurl | - | 数据 URL |
css | .css | CSS 文件 |
自定义加载器:
await Bun.build({
entrypoints: ["./src/index.ts"],
loader: {
".svg": "text",
".png": "file",
".woff2": "file",
},
});
const myPlugin = {
name: "my-plugin",
setup(build) {
// 解析钩子
build.onResolve({ filter: /\.special$/ }, (args) => {
return { path: args.path, namespace: "special" };
});
// 加载钩子
build.onLoad({ filter: /.*/, namespace: "special" }, (args) => {
return {
contents: `export default "special"`,
loader: "js",
};
});
},
};
await Bun.build({
entrypoints: ["./src/index.ts"],
plugins: [myPlugin],
});
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
});
// 检查是否成功
if (!result.success) {
for (const log of result.logs) {
console.error(log);
}
process.exit(1);
}
// 访问输出
for (const output of result.outputs) {
console.log(output.path); // 文件路径
console.log(output.kind); // "entry-point" | "chunk" | "asset"
console.log(output.hash); // 内容哈希值
console.log(output.loader); // 使用的加载器
// 读取内容
const text = await output.text();
}
await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
target: "browser",
minify: true,
sourcemap: "external",
splitting: true,
define: {
"process.env.NODE_ENV": JSON.stringify("production"),
},
});
await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
target: "bun",
format: "esm",
external: ["*"], // 外部化所有依赖项
sourcemap: "external",
});
// build.ts
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
minify: process.env.NODE_ENV === "production",
});
if (!result.success) {
console.error("构建失败");
process.exit(1);
}
console.log(`构建了 ${result.outputs.length} 个文件`);
运行:bun run build.ts
| 错误 | 原因 | 修复方法 |
|---|---|---|
Could not resolve | 缺少导入 | 安装包或修复路径 |
No matching export | 命名导出缺失 | 检查导出名称 |
Unexpected token | 语法错误 | 修复源代码 |
Target not supported | 无效的目标环境 | 使用 browser, bun, 或 node |
加载 references/options.md 当:
加载 references/plugins.md 当:
加载 references/macros.md 当:
每周安装量
–
代码仓库
GitHub 星标数
93
首次出现
–
安全审计
Bun's bundler is a fast JavaScript/TypeScript bundler built on the same engine as Bun's runtime. It's an esbuild-compatible alternative with native performance.
# Basic bundle
bun build ./src/index.ts --outdir ./dist
# Production build
bun build ./src/index.ts --outdir ./dist --minify
# Multiple entry points
bun build ./src/index.ts ./src/worker.ts --outdir ./dist
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
});
if (!result.success) {
console.error("Build failed:", result.logs);
}
await Bun.build({
// Entry points (required)
entrypoints: ["./src/index.ts"],
// Output directory
outdir: "./dist",
// Target environment
target: "browser", // "browser" | "bun" | "node"
// Output format
format: "esm", // "esm" | "cjs" | "iife"
// Minification
minify: true, // or { whitespace: true, identifiers: true, syntax: true }
// Code splitting
splitting: true,
// Source maps
sourcemap: "external", // "none" | "inline" | "external" | "linked"
// Naming patterns
naming: {
entry: "[dir]/[name].[ext]",
chunk: "[name]-[hash].[ext]",
asset: "[name]-[hash].[ext]",
},
// Define globals
define: {
"process.env.NODE_ENV": JSON.stringify("production"),
},
// External packages
external: ["react", "react-dom"],
// Loaders
loader: {
".svg": "text",
".png": "file",
},
// Plugins
plugins: [myPlugin],
// Root directory
root: "./src",
// Public path for assets
publicPath: "/static/",
});
bun build <entrypoints> [flags]
| Flag | Description |
|---|---|
--outdir | Output directory |
--outfile | Output single file |
--target | browser, bun, node |
--format | esm, , |
await Bun.build({
entrypoints: ["./src/index.ts"],
target: "browser",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/server.ts"],
target: "bun",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/server.ts"],
target: "node",
outdir: "./dist",
});
await Bun.build({
entrypoints: ["./src/index.ts", "./src/admin.ts"],
splitting: true,
outdir: "./dist",
});
Shared dependencies are extracted into separate chunks automatically.
| Loader | Extensions | Output |
|---|---|---|
js | .js, .mjs, .cjs | JavaScript |
jsx | .jsx | JavaScript |
ts | .ts, , |
Custom loaders:
await Bun.build({
entrypoints: ["./src/index.ts"],
loader: {
".svg": "text",
".png": "file",
".woff2": "file",
},
});
const myPlugin = {
name: "my-plugin",
setup(build) {
// Resolve hook
build.onResolve({ filter: /\.special$/ }, (args) => {
return { path: args.path, namespace: "special" };
});
// Load hook
build.onLoad({ filter: /.*/, namespace: "special" }, (args) => {
return {
contents: `export default "special"`,
loader: "js",
};
});
},
};
await Bun.build({
entrypoints: ["./src/index.ts"],
plugins: [myPlugin],
});
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
});
// Check success
if (!result.success) {
for (const log of result.logs) {
console.error(log);
}
process.exit(1);
}
// Access outputs
for (const output of result.outputs) {
console.log(output.path); // File path
console.log(output.kind); // "entry-point" | "chunk" | "asset"
console.log(output.hash); // Content hash
console.log(output.loader); // Loader used
// Read content
const text = await output.text();
}
await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
target: "browser",
minify: true,
sourcemap: "external",
splitting: true,
define: {
"process.env.NODE_ENV": JSON.stringify("production"),
},
});
await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
target: "bun",
format: "esm",
external: ["*"], // Externalize all dependencies
sourcemap: "external",
});
// build.ts
const result = await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
minify: process.env.NODE_ENV === "production",
});
if (!result.success) {
console.error("Build failed");
process.exit(1);
}
console.log(`Built ${result.outputs.length} files`);
Run: bun run build.ts
| Error | Cause | Fix |
|---|---|---|
Could not resolve | Missing import | Install package or fix path |
No matching export | Named export missing | Check export name |
Unexpected token | Syntax error | Fix source code |
Target not supported | Invalid target | Use browser, bun, or |
Load references/options.md when:
Load references/plugins.md when:
Load references/macros.md when:
Weekly Installs
–
Repository
GitHub Stars
93
First Seen
–
Security Audits
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
107,800 周安装
cjsiife--minify | Enable minification |
--minify-whitespace | Minify whitespace only |
--minify-identifiers | Minify identifiers only |
--minify-syntax | Minify syntax only |
--splitting | Enable code splitting |
--sourcemap | none, inline, external, linked |
--external | Mark packages as external |
--define | Define compile-time constants |
--loader | Custom loaders for extensions |
--public-path | Public path for assets |
--root | Root directory |
--entry-naming | Entry point naming pattern |
--chunk-naming | Chunk naming pattern |
--asset-naming | Asset naming pattern |
.mts.cts| JavaScript |
tsx | .tsx | JavaScript |
json | .json | JavaScript |
toml | .toml | JavaScript |
text | - | String export |
file | - | File path export |
base64 | - | Base64 string |
dataurl | - | Data URL |
css | .css | CSS file |
node