esbuild-bundler by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill esbuild-bundler您是一位精通 esbuild 的专家,esbuild 是一款用 Go 语言编写的极速 JavaScript 和 TypeScript 打包工具。在处理 esbuild 配置时,请遵循以下指南。
project/
├── src/
│ ├── index.ts # 主入口点
│ ├── components/ # UI 组件
│ └── utils/ # 工具函数
├── dist/ # 构建输出目录
├── esbuild.config.mjs # 构建脚本(可选)
├── tsconfig.json # TypeScript 配置
└── package.json
# 基本打包
esbuild src/index.ts --bundle --outfile=dist/bundle.js
# 生产环境构建
esbuild src/index.ts --bundle --minify --sourcemap --outfile=dist/bundle.js
# 监听模式
esbuild src/index.ts --bundle --watch --outfile=dist/bundle.js
import * as esbuild from 'esbuild';
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
minify: true,
sourcemap: true,
outfile: 'dist/bundle.js'
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"esModuleInterop": true,
"isolatedModules": true,
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"verbatimModuleSyntax": true,
"noUncheckedIndexedAccess": true
},
"include": ["src/**/*"]
}
isolatedModules: true - esbuild 兼容性所必需esModuleInterop: true - 更好的 ESM 兼容性noEmit: true - 让 esbuild 处理输出,仅使用 tsc 进行类型检查await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
minify: true,
sourcemap: true,
target: ['chrome90', 'firefox88', 'safari14', 'edge90'],
outfile: 'dist/bundle.js'
});
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
platform: 'node',
target: 'node18',
format: 'esm',
outfile: 'dist/index.js'
});
await esbuild.build({
entryPoints: ['src/index.ts', 'src/worker.ts'],
bundle: true,
outdir: 'dist',
splitting: true,
format: 'esm'
});
await esbuild.build({
format: 'esm',
// 输出:import/export 语法
});
await esbuild.build({
format: 'cjs',
// 输出:require/module.exports
});
await esbuild.build({
format: 'iife',
globalName: 'MyApp',
// 输出:自执行函数
});
await esbuild.build({
loader: {
'.png': 'file',
'.svg': 'text',
'.json': 'json',
'.woff': 'dataurl'
}
});
js - JavaScriptts - TypeScriptjsx - 带 JSX 的 JavaScripttsx - 带 JSX 的 TypeScriptjson - JSON 数据text - 纯文本file - 复制文件,返回路径dataurl - 内联为 data URLbinary - 内联为 Uint8Arraybase64 - 内联为 base64copy - 复制文件,无引用await esbuild.build({
external: ['react', 'react-dom', 'lodash']
});
await esbuild.build({
external: ['*.png', '@aws-sdk/*']
});
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
splitting: true,
format: 'esm',
outdir: 'dist'
});
注意:代码分割需要 format: 'esm' 和 outdir(而不是 outfile)。
const myPlugin = {
name: 'my-plugin',
setup(build) {
// On resolve - 拦截导入路径
build.onResolve({ filter: /^env$/ }, args => ({
path: args.path,
namespace: 'env-ns'
}));
// On load - 提供模块内容
build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
contents: JSON.stringify(process.env),
loader: 'json'
}));
}
};
await esbuild.build({
plugins: [myPlugin]
});
import esbuildPluginTsc from 'esbuild-plugin-tsc';
await esbuild.build({
plugins: [
esbuildPluginTsc({
force: true
})
]
});
const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist'
});
await ctx.serve({
servedir: 'dist',
port: 3000
});
const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outfile: 'dist/bundle.js'
});
await ctx.watch();
console.log('正在监听更改...');
await esbuild.build({
define: {
'process.env.NODE_ENV': '"production"',
'process.env.API_URL': JSON.stringify(process.env.API_URL)
}
});
await esbuild.build({
minify: true,
// 或进行细粒度控制:
minifyWhitespace: true,
minifyIdentifiers: true,
minifySyntax: true
});
await esbuild.build({
treeShaking: true,
// 将文件标记为无副作用
ignoreAnnotations: false
});
await esbuild.build({
drop: ['console', 'debugger']
});
esbuild 不执行类型检查。请单独运行 TypeScript:
{
"scripts": {
"typecheck": "tsc --noEmit",
"build": "npm run typecheck && node esbuild.config.mjs",
"dev": "concurrently \"tsc --noEmit --watch\" \"node esbuild.config.mjs --watch\""
}
}
// esbuild.config.mjs
import * as esbuild from 'esbuild';
const isProduction = process.env.NODE_ENV === 'production';
const isWatch = process.argv.includes('--watch');
const config = {
entryPoints: ['src/index.ts'],
bundle: true,
platform: 'browser',
target: ['es2020'],
format: 'esm',
outdir: 'dist',
sourcemap: !isProduction,
minify: isProduction,
splitting: true,
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
};
if (isWatch) {
const ctx = await esbuild.context(config);
await ctx.watch();
console.log('正在监听更改...');
} else {
await esbuild.build(config);
console.log('构建完成!');
}
isolatedModules: truetsc --noEmit 单独运行类型检查isolatedModules 要求await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
external: ['react', 'react-dom'],
format: 'esm',
outfile: 'dist/index.js',
sourcemap: true
});
await esbuild.build({
entryPoints: ['src/index.tsx'],
bundle: true,
splitting: true,
format: 'esm',
outdir: 'dist',
minify: true,
sourcemap: true,
target: ['chrome90', 'firefox88', 'safari14']
});
每周安装量
101
代码仓库
GitHub 星标数
42
首次出现
2026年1月25日
安全审计
安装于
opencode83
gemini-cli81
codex77
claude-code77
cursor76
github-copilot73
You are an expert in esbuild, the extremely fast JavaScript and TypeScript bundler written in Go. Follow these guidelines when working with esbuild configurations.
project/
├── src/
│ ├── index.ts # Main entry point
│ ├── components/ # UI components
│ └── utils/ # Utility functions
├── dist/ # Build output
├── esbuild.config.mjs # Build script (optional)
├── tsconfig.json # TypeScript config
└── package.json
# Basic bundle
esbuild src/index.ts --bundle --outfile=dist/bundle.js
# Production build
esbuild src/index.ts --bundle --minify --sourcemap --outfile=dist/bundle.js
# Watch mode
esbuild src/index.ts --bundle --watch --outfile=dist/bundle.js
import * as esbuild from 'esbuild';
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
minify: true,
sourcemap: true,
outfile: 'dist/bundle.js'
});
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"esModuleInterop": true,
"isolatedModules": true,
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"verbatimModuleSyntax": true,
"noUncheckedIndexedAccess": true
},
"include": ["src/**/*"]
}
isolatedModules: true - Required for esbuild compatibilityesModuleInterop: true - Better ESM compatibilitynoEmit: true - Let esbuild handle output, use tsc for type checking onlyawait esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
minify: true,
sourcemap: true,
target: ['chrome90', 'firefox88', 'safari14', 'edge90'],
outfile: 'dist/bundle.js'
});
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
platform: 'node',
target: 'node18',
format: 'esm',
outfile: 'dist/index.js'
});
await esbuild.build({
entryPoints: ['src/index.ts', 'src/worker.ts'],
bundle: true,
outdir: 'dist',
splitting: true,
format: 'esm'
});
await esbuild.build({
format: 'esm',
// Outputs: import/export syntax
});
await esbuild.build({
format: 'cjs',
// Outputs: require/module.exports
});
await esbuild.build({
format: 'iife',
globalName: 'MyApp',
// Outputs: self-executing function
});
await esbuild.build({
loader: {
'.png': 'file',
'.svg': 'text',
'.json': 'json',
'.woff': 'dataurl'
}
});
js - JavaScriptts - TypeScriptjsx - JavaScript with JSXtsx - TypeScript with JSXjson - JSON datatext - Plain textfile - Copy file, return pathdataurl - Inline as data URLbinary - Inline as Uint8Arraybase64 - Inline as base64await esbuild.build({
external: ['react', 'react-dom', 'lodash']
});
await esbuild.build({
external: ['*.png', '@aws-sdk/*']
});
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
splitting: true,
format: 'esm',
outdir: 'dist'
});
Note: Code splitting requires format: 'esm' and outdir (not outfile).
const myPlugin = {
name: 'my-plugin',
setup(build) {
// On resolve - intercept import paths
build.onResolve({ filter: /^env$/ }, args => ({
path: args.path,
namespace: 'env-ns'
}));
// On load - provide module contents
build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
contents: JSON.stringify(process.env),
loader: 'json'
}));
}
};
await esbuild.build({
plugins: [myPlugin]
});
import esbuildPluginTsc from 'esbuild-plugin-tsc';
await esbuild.build({
plugins: [
esbuildPluginTsc({
force: true
})
]
});
const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist'
});
await ctx.serve({
servedir: 'dist',
port: 3000
});
const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outfile: 'dist/bundle.js'
});
await ctx.watch();
console.log('Watching for changes...');
await esbuild.build({
define: {
'process.env.NODE_ENV': '"production"',
'process.env.API_URL': JSON.stringify(process.env.API_URL)
}
});
await esbuild.build({
minify: true,
// Or granular control:
minifyWhitespace: true,
minifyIdentifiers: true,
minifySyntax: true
});
await esbuild.build({
treeShaking: true,
// Mark files as side-effect free
ignoreAnnotations: false
});
await esbuild.build({
drop: ['console', 'debugger']
});
esbuild does not perform type checking. Run TypeScript separately:
{
"scripts": {
"typecheck": "tsc --noEmit",
"build": "npm run typecheck && node esbuild.config.mjs",
"dev": "concurrently \"tsc --noEmit --watch\" \"node esbuild.config.mjs --watch\""
}
}
// esbuild.config.mjs
import * as esbuild from 'esbuild';
const isProduction = process.env.NODE_ENV === 'production';
const isWatch = process.argv.includes('--watch');
const config = {
entryPoints: ['src/index.ts'],
bundle: true,
platform: 'browser',
target: ['es2020'],
format: 'esm',
outdir: 'dist',
sourcemap: !isProduction,
minify: isProduction,
splitting: true,
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
};
if (isWatch) {
const ctx = await esbuild.context(config);
await ctx.watch();
console.log('Watching for changes...');
} else {
await esbuild.build(config);
console.log('Build complete!');
}
isolatedModules: true in TypeScript configtsc --noEmitisolatedModules requirementawait esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
external: ['react', 'react-dom'],
format: 'esm',
outfile: 'dist/index.js',
sourcemap: true
});
await esbuild.build({
entryPoints: ['src/index.tsx'],
bundle: true,
splitting: true,
format: 'esm',
outdir: 'dist',
minify: true,
sourcemap: true,
target: ['chrome90', 'firefox88', 'safari14']
});
Weekly Installs
101
Repository
GitHub Stars
42
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode83
gemini-cli81
codex77
claude-code77
cursor76
github-copilot73
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
7,700 周安装
Hummingbot 部署指南:一键安装交易机器人 API、MCP 服务器与 Condor 界面
232 周安装
WooCommerce 代码审查指南:PHP 后端、UI 文案与测试规范详解
237 周安装
Loogle Search - Mathlib 类型签名搜索工具,快速查找Lean定理引理
237 周安装
Codex技能指南:GPT-5.2模型使用教程与命令行工具优化配置
232 周安装
Claude AI 接线验证指南:四步检查确保基础设施组件正确调用
237 周安装
Weights & Biases (W&B) 机器学习实验追踪与 MLOps 平台 - 超参数优化与模型管理
234 周安装
copy - Copy file, no reference