npm install esbuild | Install esbuild |
esbuild app.js --bundle --outfile=out.js | Bundle file |
esbuild app.ts --bundle --outfile=out.js | Bundle TypeScript |
esbuild app.js --minify | Minify output |
esbuild app.js --sourcemap | Generate sourcemap |
esbuild app.js --watch | Watch mode |
esbuild app.js --serve=8000 | Dev server |
import * as esbuild from 'esbuild'
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
outfile: 'dist/bundle.js',
minify: true,
sourcemap: true,
target: ['es2020'],
platform: 'browser',
}) await esbuild.build({
entryPoints: [
'src/home.ts',
'src/about.ts',
'src/contact.ts',
],
bundle: true,
outdir: 'dist',
splitting: true,
format: 'esm',
}) {
// Output format
format: 'esm', // esm, cjs, iife
// Platform
platform: 'browser', // browser, node, neutral
// Target environment
target: ['es2020', 'chrome80', 'firefox78'],
// Global name for IIFE
globalName: 'MyLib',
// Output file names
entryNames: '[dir]/[name]-[hash]',
assetNames: 'assets/[name]-[hash]',
} {
// External packages
external: ['react', 'react-dom'],
// Alias
alias: {
'@': './src',
'@utils': './src/utils',
},
// Define constants
define: {
'process.env.NODE_ENV': '"production"',
'__VERSION__': '"1.0.0"',
},
// Inject files
inject: ['./polyfills.js'],
} {
loader: {
'.png': 'file',
'.svg': 'dataurl',
'.txt': 'text',
'.json': 'json',
'.woff2': 'file',
},
// Asset names
assetNames: 'assets/[name]-[hash]',
// Public path
publicPath: 'https://cdn.example.com/',
} const myPlugin = {
name: 'my-plugin',
setup(build) {
// Resolve imports
build.onResolve({ filter: /^my-/ }, args => ({
path: args.path,
namespace: 'my-ns',
}))
// Load files
build.onLoad({ filter: /.*/, namespace: 'my-ns' }, args => ({
contents: 'export default "loaded"',
loader: 'js',
}))
// On build end
build.onEnd(result => {
console.log(`Built with ${result.errors.length} errors`)
})
},
}
await esbuild.build({
plugins: [myPlugin],
}) // CSS modules
import cssModulesPlugin from 'esbuild-css-modules-plugin'
// Vue
import vuePlugin from 'esbuild-plugin-vue3'
// Svelte
import sveltePlugin from 'esbuild-svelte'
// Copy static files
import { copy } from 'esbuild-plugin-copy'
await esbuild.build({
plugins: [
cssModulesPlugin(),
copy({ assets: { from: './public/*', to: './' } }),
],
}) const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
})
// Start dev server
await ctx.serve({
servedir: 'dist',
port: 3000,
})
// Or watch mode
await ctx.watch()
// Cleanup
await ctx.dispose() const ctx = await esbuild.context({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
banner: {
js: `new EventSource('/esbuild').addEventListener('change', () => location.reload())`,
},
})
await ctx.serve({ servedir: 'dist' })