Aller au contenu

Feuille de chaleur ESBuild

ESBuild - Un bundler JavaScript extrêmement rapide

ESBuild est un paqueteur JavaScript extrêmement rapide. Il emballe le code JavaScript et TypeScript pour distribution sur le web, et est écrit en Go ce qui le rend 10-100x plus rapide que les autres faisceaux.

Copier toutes les commandes Générer PDF

Sommaire

  • [Installation] (#installation)
  • [Utilisation de base] (#basic-usage)
  • [Interface de ligne de commande] (#command-line-interface)
  • API JavaScript
  • [Configuration] (#configuration)
  • [Points d'entrée] (#entry-points)
  • [Résultat] (#output)
  • [Loueurs] (#loaders)
  • [Plugins] (#plugins)
  • [dépendances extérieures] (#external-dependencies)
  • [Doublure du code] (#code-splitting)
  • Tree Shaking
  • [Cartes des sources] (#source-maps)
  • [Mode de veille] (#watch-mode)
  • [Serveur de développement] (#development-server)
  • [Type de support de script] (#typescript-support)
  • [JSX et Réagir] (#jsx-and-react)
  • [CSS et actifs] (#css-and-assets)
  • [Optimisation] (#optimization)
  • [Cibles de la plate-forme] (#platform-targets)
  • [Caractéristiques avancées] (#advanced-features)
  • [Performance] (#performance)
  • [Meilleures pratiques] (#best-practices)

Installation

Installation mondiale

# Install ESBuild globally
npm install -g esbuild

# Check version
esbuild --version

Installation locale (recommandée)

# Initialize npm project
npm init -y

# Install ESBuild locally
npm install --save-dev esbuild

# Or with Yarn
yarn add --dev esbuild
```_

### Paquet.json Scripts
```json
{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js",
    "dev": "esbuild src/index.js --bundle --outfile=dist/bundle.js --watch",
    "serve": "esbuild src/index.js --bundle --outfile=dist/bundle.js --servedir=dist"
  }
}
```_

## Utilisation de base

### Construction simple
```bash
# Bundle a single file
esbuild src/index.js --bundle --outfile=dist/bundle.js

# Minify the output
esbuild src/index.js --bundle --minify --outfile=dist/bundle.min.js

# Generate source maps
esbuild src/index.js --bundle --sourcemap --outfile=dist/bundle.js

Points d'entrée multiples

# Multiple files
esbuild src/home.js src/about.js --bundle --outdir=dist

# With different formats
esbuild src/index.js --bundle --format=esm --outfile=dist/index.esm.js
esbuild src/index.js --bundle --format=cjs --outfile=dist/index.cjs.js
esbuild src/index.js --bundle --format=iife --outfile=dist/index.iife.js

Support de script de type

# TypeScript files (no configuration needed)
esbuild src/index.ts --bundle --outfile=dist/bundle.js

# With type checking (requires tsc)
tsc --noEmit && esbuild src/index.ts --bundle --outfile=dist/bundle.js

Interface de ligne de commande

Créer des options

# Basic bundling
esbuild src/index.js --bundle --outfile=dist/bundle.js

# Output directory for multiple files
esbuild src/*.js --bundle --outdir=dist

# Minification
esbuild src/index.js --bundle --minify --outfile=dist/bundle.min.js

# Source maps
esbuild src/index.js --bundle --sourcemap --outfile=dist/bundle.js
esbuild src/index.js --bundle --sourcemap=inline --outfile=dist/bundle.js
esbuild src/index.js --bundle --sourcemap=external --outfile=dist/bundle.js

Options de format

# ES modules (default)
esbuild src/index.js --bundle --format=esm --outfile=dist/bundle.esm.js

# CommonJS
esbuild src/index.js --bundle --format=cjs --outfile=dist/bundle.cjs.js

# IIFE (Immediately Invoked Function Expression)
esbuild src/index.js --bundle --format=iife --outfile=dist/bundle.iife.js

# IIFE with global name
esbuild src/index.js --bundle --format=iife --global-name=MyLibrary --outfile=dist/bundle.js

Options cibles

# Target specific environments
esbuild src/index.js --bundle --target=es2020 --outfile=dist/bundle.js
esbuild src/index.js --bundle --target=node14 --outfile=dist/bundle.js
esbuild src/index.js --bundle --target=chrome90,firefox88 --outfile=dist/bundle.js

# Platform targeting
esbuild src/index.js --bundle --platform=browser --outfile=dist/bundle.js
esbuild src/index.js --bundle --platform=node --outfile=dist/bundle.js
esbuild src/index.js --bundle --platform=neutral --outfile=dist/bundle.js

Dépendances extérieures

# Mark packages as external
esbuild src/index.js --bundle --external:react --external:react-dom --outfile=dist/bundle.js

# External with wildcards
esbuild src/index.js --bundle --external:@babel/* --outfile=dist/bundle.js

Options du chargeur

# Specify loaders for file types
esbuild src/index.js --bundle --loader:.png=file --loader:.svg=text --outfile=dist/bundle.js

# Data URL loader
esbuild src/index.js --bundle --loader:.png=dataurl --outfile=dist/bundle.js

# Base64 loader
esbuild src/index.js --bundle --loader:.woff=base64 --outfile=dist/bundle.js

JavaScript API

API de construction de base

const esbuild = require('esbuild');

// Simple build
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
}).catch(() => process.exit(1));

// With async/await
async function build() {
  try {
    await esbuild.build({
      entryPoints: ['src/index.js'],
      bundle: true,
      outfile: 'dist/bundle.js',
      minify: true,
      sourcemap: true
    });
    console.log('Build completed successfully');
  } catch (error) {
    console.error('Build failed:', error);
    process.exit(1);
  }
}

build();

Configuration avancée de construction

const esbuild = require('esbuild');

const buildOptions = {
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: ['es2020', 'chrome90', 'firefox88'],
  format: 'esm',
  platform: 'browser',
  external: ['react', 'react-dom'],
  loader: {
    '.png': 'file',
    '.svg': 'text',
    '.css': 'css'
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  }
};

esbuild.build(buildOptions).catch(() => process.exit(1));

Constructions multiples

const esbuild = require('esbuild');

const builds = [
  // ES module build
  {
    entryPoints: ['src/index.js'],
    bundle: true,
    format: 'esm',
    outfile: 'dist/index.esm.js'
  },
  // CommonJS build
  {
    entryPoints: ['src/index.js'],
    bundle: true,
    format: 'cjs',
    outfile: 'dist/index.cjs.js'
  },
  // IIFE build
  {
    entryPoints: ['src/index.js'],
    bundle: true,
    format: 'iife',
    globalName: 'MyLibrary',
    outfile: 'dist/index.iife.js'
  }
];

Promise.all(builds.map(build => esbuild.build(build)))
  .then(() => console.log('All builds completed'))
  .catch(() => process.exit(1));

Configuration

Construire le fichier de configuration

// build.js
const esbuild = require('esbuild');

const isDev = process.argv.includes('--dev');
const isWatch = process.argv.includes('--watch');

const config = {
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: !isDev,
  sourcemap: isDev,
  target: ['es2020'],
  format: 'esm',
  platform: 'browser',
  loader: {
    '.png': 'file',
    '.jpg': 'file',
    '.svg': 'text',
    '.css': 'css'
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production')
  }
};

if (isWatch) {
  esbuild.build({
    ...config,
    watch: {
      onRebuild(error, result) {
        if (error) console.error('Watch build failed:', error);
        else console.log('Watch build succeeded');
      }
    }
  });
} else {
  esbuild.build(config).catch(() => process.exit(1));
}

Environnement Configuration

// esbuild.config.js
const esbuild = require('esbuild');

const createConfig = (env) => ({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: `dist/bundle.${env}.js`,
  minify: env === 'production',
  sourcemap: env === 'development',
  target: env === 'production' ? ['es2018'] : ['es2020'],
  define: {
    'process.env.NODE_ENV': JSON.stringify(env),
    'process.env.API_URL': JSON.stringify(
      env === 'production' 
        ? 'https://api.production.com' 
        : 'http://localhost:3000'
    )
  }
});

module.exports = { createConfig };

Points d'entrée

Point d'entrée unique

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

Points d'entrée multiples

esbuild.build({
  entryPoints: ['src/home.js', 'src/about.js', 'src/contact.js'],
  bundle: true,
  outdir: 'dist'
});

Points d'entrée désignés

esbuild.build({
  entryPoints: {
    home: 'src/pages/home.js',
    about: 'src/pages/about.js',
    admin: 'src/admin/index.js'
  },
  bundle: true,
  outdir: 'dist'
});

Points d'entrée dynamiques

const glob = require('glob');

const entryPoints = glob.sync('src/pages/*.js').reduce((acc, file) => {
  const name = file.replace('src/pages/', '').replace('.js', '');
  acc[name] = file;
  return acc;
}, {});

esbuild.build({
  entryPoints,
  bundle: true,
  outdir: 'dist'
});

Produit

Fichier de sortie

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

Répertoire des produits

esbuild.build({
  entryPoints: ['src/home.js', 'src/about.js'],
  bundle: true,
  outdir: 'dist',
  entryNames: '[name]-[hash]',
  chunkNames: 'chunks/[name]-[hash]',
  assetNames: 'assets/[name]-[hash]'
});

Voie publique

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  publicPath: '/static/'
});

Écrire à la mémoire

const result = await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  write: false, // Don't write to disk
  outdir: 'dist'
});

// Access output files
result.outputFiles.forEach(file => {
  console.log(file.path, file.text);
});

Chargeurs

Chargeurs intégrés

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.js': 'js',
    '.jsx': 'jsx',
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.css': 'css',
    '.json': 'json',
    '.txt': 'text',
    '.png': 'file',
    '.jpg': 'file',
    '.gif': 'file',
    '.svg': 'dataurl',
    '.woff': 'base64',
    '.woff2': 'base64'
  }
});

Chargeur de fichiers

// Copies files to output directory
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  loader: {
    '.png': 'file',
    '.jpg': 'file',
    '.gif': 'file'
  }
});

// Usage in code
import logoUrl from './logo.png';
document.getElementById('logo').src = logoUrl;

Chargeur d'URL de données

// Embeds files as data URLs
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.svg': 'dataurl',
    '.png': 'dataurl'
  }
});

// Usage in code
import logo from './logo.svg'; // data:image/svg+xml;base64,...

Chargeur de texte

// Imports files as strings
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.txt': 'text',
    '.md': 'text',
    '.sql': 'text'
  }
});

// Usage in code
import readme from './README.md';
console.log(readme); // String content

Chargeur de base64

// Imports files as base64 strings
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.woff': 'base64',
    '.woff2': 'base64'
  }
});

// Usage in code
import fontData from './font.woff2';
// Base64 encoded string

Greffons

Système de connexion

// Simple plugin
const examplePlugin = {
  name: 'example',
  setup(build) {
    build.onResolve({ filter: /^example:/ }, args => {
      return { path: args.path, namespace: 'example' };
    });

    build.onLoad({ filter: /.*/, namespace: 'example' }, args => {
      return {
        contents: 'export default "This is from the example plugin"',
        loader: 'js'
      };
    });
  }
};

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [examplePlugin]
});

Plugin du système de fichiers

const fs = require('fs');
const path = require('path');

const fileSystemPlugin = {
  name: 'file-system',
  setup(build) {
    build.onResolve({ filter: /^fs:/ }, args => {
      return {
        path: path.resolve(args.resolveDir, args.path.slice(3)),
        namespace: 'file-system'
      };
    });

    build.onLoad({ filter: /.*/, namespace: 'file-system' }, args => {
      const contents = fs.readFileSync(args.path, 'utf8');
      return {
        contents: `export default ${JSON.stringify(contents)}`,
        loader: 'js'
      };
    });
  }
};

// Usage: import content from 'fs:./data.txt';

Greffon HTTP

const https = require('https');

const httpPlugin = {
  name: 'http',
  setup(build) {
    build.onResolve({ filter: /^https?:\/\// }, args => {
      return { path: args.path, namespace: 'http-url' };
    });

    build.onLoad({ filter: /.*/, namespace: 'http-url' }, args => {
      return new Promise((resolve, reject) => {
        https.get(args.path, res => {
          let data = '';
          res.on('data', chunk => data += chunk);
          res.on('end', () => resolve({
            contents: data,
            loader: 'js'
          }));
        }).on('error', reject);
      });
    });
  }
};

// Usage: import module from 'https://cdn.skypack.dev/lodash';

Variables d'environnement Greffon

const envPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, args => {
      return { path: args.path, namespace: 'env' };
    });

    build.onLoad({ filter: /.*/, namespace: 'env' }, args => {
      return {
        contents: `export default ${JSON.stringify(process.env)}`,
        loader: 'js'
      };
    });
  }
};

// Usage: import env from 'env';

Dépendances extérieures

Base extérieure

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  external: ['react', 'react-dom', 'lodash']
});

Externe avec motifs

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  external: [
    'react*', // react, react-dom, react-router, etc.
    '@babel/*', // All @babel packages
    'node:*' // Node.js built-in modules
  ]
});

Externe

const isProduction = process.env.NODE_ENV === 'production';

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  external: isProduction ? ['react', 'react-dom'] : []
});

Fractionnement du code

fractionnement automatique du code

esbuild.build({
  entryPoints: ['src/home.js', 'src/about.js'],
  bundle: true,
  outdir: 'dist',
  splitting: true,
  format: 'esm' // Required for splitting
});

Importations dynamiques

// main.js
async function loadModule() {
  const { default: heavyModule } = await import('./heavy-module.js');
  return heavyModule();
}

// ESBuild config
esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outdir: 'dist',
  splitting: true,
  format: 'esm'
});

Bouchons manuels

// Use dynamic imports to create manual chunks
const loadUtils = () => import('./utils');
const loadComponents = () => import('./components');

// ESBuild will automatically create separate chunks

Shaking d'arbre

Shaking automatique des arbres

// ESBuild automatically tree-shakes ES modules
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm' // Required for tree shaking
});

Effets secondaires

// package.json
{
  "sideEffects": false // Enable aggressive tree shaking
}

// Or specify files with side effects
{
  "sideEffects": [
    "*.css",
    "./src/polyfills.js"
  ]
}

Exemple de tremblement d'arbre

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b; // This won't be included if not used
}

// main.js
import { add } from './utils.js'; // Only 'add' is bundled
console.log(add(2, 3));

Cartes sources

Options de carte des sources

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: true // External source map
});

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: 'inline' // Inline source map
});

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: 'external' // External source map (same as true)
});

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: 'both' // Both inline and external
});

Configuration de la carte source

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: true,
  sourceRoot: '/src', // Source root in source map
  sourcesContent: false // Don't include source content
});

Mode veille

Mode de montre de base

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  watch: true
});

Regarder avec les rappels

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  watch: {
    onRebuild(error, result) {
      if (error) {
        console.error('Watch build failed:', error);
      } else {
        console.log('Watch build succeeded:', result);
      }
    }
  }
});

Configuration avancée de la veille

const ctx = await esbuild.context({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

// Start watching
await ctx.watch();

// Stop watching later
await ctx.dispose();

Serveur de développement

Serveur de développement de base

# Serve files from a directory
esbuild src/index.js --bundle --outfile=dist/bundle.js --servedir=dist

# Custom port
esbuild src/index.js --bundle --outfile=dist/bundle.js --servedir=dist --serve=8080

API du serveur de développement

const ctx = await esbuild.context({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

// Start development server
const { host, port } = await ctx.serve({
  servedir: 'dist',
  port: 3000
});

console.log(`Server running at http://${host}:${port}`);

Configuration de la recharge en direct

const ctx = await esbuild.context({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist'
});

// Watch and serve
await Promise.all([
  ctx.watch(),
  ctx.serve({
    servedir: 'dist',
    port: 3000
  })
]);

Support de script de type

Script de type de base

// No configuration needed for basic TypeScript
esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

TypeScript avec vérification de type

// ESBuild doesn't type-check, use tsc for that
const { execSync } = require('child_process');

// Type check first
try {
  execSync('tsc --noEmit', { stdio: 'inherit' });
} catch (error) {
  process.exit(1);
}

// Then build
esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

Configuration du script de type

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  target: 'es2020',
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx'
  }
});

TypeScript Voies

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

// ESBuild doesn't resolve TypeScript paths automatically
// Use a plugin or resolve manually
const path = require('path');

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [{
    name: 'resolve-paths',
    setup(build) {
      build.onResolve({ filter: /^@\// }, args => {
        return {
          path: path.resolve('src', args.path.slice(2))
        };
      });
    }
  }]
});

JSX et Réagir

Réagir JSX

esbuild.build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.jsx': 'jsx'
  },
  jsx: 'automatic' // React 17+ automatic JSX
});

JSX personnalisé

esbuild.build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  jsx: 'transform',
  jsxFactory: 'h', // Preact
  jsxFragment: 'Fragment'
});

JSX Développement

esbuild.build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  jsx: 'automatic',
  jsxDev: true, // Development mode
  define: {
    'process.env.NODE_ENV': '"development"'
  }
});

TypeScript + Réagir

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.tsx': 'tsx'
  },
  jsx: 'automatic'
});

CSS et actifs

CSS Groupe

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: {
    '.css': 'css'
  }
});

// Import CSS in JavaScript
import './styles.css';

CSS Modules (avec plugin)

const cssModulesPlugin = {
  name: 'css-modules',
  setup(build) {
    build.onLoad({ filter: /\.module\.css$/ }, async (args) => {
      // Implement CSS modules logic
      const css = await fs.promises.readFile(args.path, 'utf8');
      // Process CSS modules...
      return {
        contents: css,
        loader: 'css'
      };
    });
  }
};

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [cssModulesPlugin]
});

Gestion des actifs

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  loader: {
    '.png': 'file',
    '.jpg': 'file',
    '.gif': 'file',
    '.svg': 'file',
    '.woff': 'file',
    '.woff2': 'file'
  },
  assetNames: 'assets/[name]-[hash]'
});

Optimisation

Minification

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: true, // Minify JavaScript
  minifyWhitespace: true,
  minifyIdentifiers: true,
  minifySyntax: true
});

Élimination du code mort

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  treeShaking: true, // Default for ES modules
  format: 'esm'
});

Définir les constantes

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  define: {
    'process.env.NODE_ENV': '"production"',
    'DEBUG': 'false',
    'VERSION': '"1.0.0"'
  }
});

Drop Console

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  drop: ['console', 'debugger']
});

Objectifs de la plateforme

Cible du navigateur

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  platform: 'browser',
  target: ['chrome90', 'firefox88', 'safari14']
});

Node.js Cible

esbuild.build({
  entryPoints: ['src/server.js'],
  bundle: true,
  outfile: 'dist/server.js',
  platform: 'node',
  target: 'node16',
  external: ['fs', 'path', 'http'] // Node.js built-ins
});

Plateforme neutre

esbuild.build({
  entryPoints: ['src/library.js'],
  bundle: true,
  outfile: 'dist/library.js',
  platform: 'neutral', // Works in any environment
  format: 'esm'
});

Caractéristiques avancées

Bannière et pied de page

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  banner: {
    js: '/* My Library v1.0.0 */',
    css: '/* Styles for My Library */'
  },
  footer: {
    js: '/* End of bundle */'
  }
});

Code d' injection

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  inject: ['./polyfills.js'] // Inject into every file
});

Génération de métadonnées

const result = await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  metafile: true
});

// Analyze bundle
console.log(await esbuild.analyzeMetafile(result.metafile));

// Save metafile
require('fs').writeFileSync('meta.json', JSON.stringify(result.metafile));

Conditions

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  conditions: ['development'] // Package.json export conditions
});

Rendement

Construire les performances

// Measure build time
const start = Date.now();

await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

console.log(`Build took ${Date.now() - start}ms`);

Constructions supplémentaires

const ctx = await esbuild.context({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js'
});

// First build
await ctx.rebuild();

// Subsequent rebuilds are faster
await ctx.rebuild();
await ctx.rebuild();

// Clean up
await ctx.dispose();

Constructions parallèles

const builds = [
  esbuild.build({
    entryPoints: ['src/client.js'],
    bundle: true,
    outfile: 'dist/client.js',
    platform: 'browser'
  }),
  esbuild.build({
    entryPoints: ['src/server.js'],
    bundle: true,
    outfile: 'dist/server.js',
    platform: 'node'
  })
];

await Promise.all(builds);

Meilleures pratiques

Structure du projet

# Recommended structure
src/
├── index.js          # Main entry point
├── components/       # React components
├── utils/           # Utility functions
├── styles/          # CSS files
├── assets/          # Images, fonts, etc.
└── types/           # TypeScript types

Meilleures pratiques de configuration

// esbuild.config.js
const esbuild = require('esbuild');

const isDev = process.env.NODE_ENV !== 'production';

const baseConfig = {
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  sourcemap: isDev,
  minify: !isDev,
  target: ['es2020'],
  loader: {
    '.png': 'file',
    '.jpg': 'file',
    '.svg': 'file',
    '.css': 'css'
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  }
};

// Development config
const devConfig = {
  ...baseConfig,
  watch: true,
  serve: {
    servedir: 'dist',
    port: 3000
  }
};

// Production config
const prodConfig = {
  ...baseConfig,
  drop: ['console', 'debugger'],
  metafile: true
};

module.exports = isDev ? devConfig : prodConfig;

Optimisation des performances

  • Utilisez les dépendances externes pour les bibliothèques qui n'ont pas besoin de regroupement
  • Activer les tremblements d'arbres avec les modules ES
  • Utilisez le fractionnement du code pour les grandes applications
  • ** Minimiser la taille du paquet** avec des chargeurs appropriés
  • Cache builds avec compilation progressive

Développement Flux de travail

  • Utilisez le mode veille pour le développement
  • Activer les cartes sources pour le débogage
  • Set up live reload pour un meilleur DX
  • Check de type séparément pour les projets TypeScript
  • Utilisez le serveur de développement pour les tests locaux

Déploiement de la production

  • ** Minimiser le code** pour les petits paquets
  • Déclarations de console de stockage pour code plus propre
  • Générer les métafichiers pour l'analyse du faisceau
  • Utilisez le hachage du contenu pour le cache
  • Construits d'essai avant déploiement

Résumé

ESBuild est un bundler JavaScript extrêmement rapide qui offre d'excellentes performances avec une configuration minimale. Les principales caractéristiques sont les suivantes :

  • Blazing Fast Speed: 10-100x plus rapide que les autres faisceaux
  • ** Configuration de Zero**: Fonctionne hors de la boîte pour la plupart des projets
  • TypeScript Support: compilation de TypeScript intégrée
  • Tree Shaking: élimination automatique du code mort
  • Doublure du code: Soutien aux importations dynamiques et au fractionnement
  • ** Formats multiples**: modules ES, CommonJS, IIFE et plus
  • ** Système Plugin**: extensible avec plugins personnalisés
  • ** Serveur de développement**: Serveur de développement intégré avec recharge en direct

En tirant parti de la vitesse et de la simplicité d'ESBuild, vous pouvez améliorer considérablement vos temps de construction tout en maintenant toutes les fonctionnalités dont vous avez besoin pour le développement web moderne.