[v4] Switch build system to use esbuild

package.json

@@ -25,8 +25,8 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "typegen": "tsc --build",
-    "dev": "webpack serve --no-client-overlay",
-    "build": "webpack && npm run typegen",
+    "dev": "node scripts/esbuild/dev.mjs",
+    "build": "node scripts/esbuild/build.mjs && npm run typegen",
     "test": "node --experimental-vm-modules --expose-gc node_modules/jest/bin/jest.js --verbose --logHeapUsage",
     "readme": "python ./docs/scripts/build_readme.py",
     "docs-api": "node ./docs/scripts/generate.js",
@@ -56,8 +56,10 @@
   "homepage": "https://github.com/huggingface/transformers.js#readme",
   "dependencies": {
     "@huggingface/jinja": "^0.5.1",
+    "esbuild": "^0.27.0",
     "onnxruntime-node": "1.24.0-dev.20251104-75d35474d5",
     "onnxruntime-web": "1.24.0-dev.20251104-75d35474d5",
+    "rimraf": "^6.1.2",
     "sharp": "^0.34.3"
   },
   "devDependencies": {
@@ -69,10 +71,7 @@
     "jsdoc-to-markdown": "^9.1.1",
     "prettier": "3.4.2",
     "typescript": "^5.8.3",
-    "wavefile": "11.0.0",
-    "webpack": "^5.99.9",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "wavefile": "11.0.0"
   },
   "files": [
     "src",

scripts/esbuild/build.mjs

@@ -0,0 +1,146 @@
+import { build as esbuild } from "esbuild";
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { stripNodePrefixPlugin } from "./build/plugins/stripNodePrefixPlugin.mjs";
+import { ignoreModulesPlugin } from "./build/plugins/ignoreModulesPlugin.mjs";
+import { postBuildPlugin } from "./build/plugins/postBuildPlugin.mjs";
+import { DIST_FOLDER, NODE_IGNORE_MODULES, NODE_EXTERNAL_MODULES, WEB_IGNORE_MODULES, WEB_EXTERNAL_MODULES } from "./build/constants.mjs";
+import { reportSize } from "./build/reportSize.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, "../..");
+
+/**
+ * Helper function to create build configurations.
+ * Equivalent to webpack's buildConfig function.
+ */
+async function buildTarget({
+  name = "",
+  suffix = ".js",
+  format = "esm", // 'esm' | 'cjs'
+  ignoreModules = [],
+  externalModules = [],
+  usePostBuild = false,
+}) {
+  const platform = format === "cjs" ? "node" : "neutral";
+  const outdir = path.join(rootDir, DIST_FOLDER);
+
+  if (!existsSync(outdir)) {
+    mkdirSync(outdir, { recursive: true });
+  }
+
+  const regularFile = `transformers${name}${suffix}`;
+  const minFile = `transformers${name}.min${suffix}`;
+
+  const plugins = [];
+  // Add ignoreModulesPlugin FIRST so it can catch modules before stripNodePrefixPlugin marks them as external
+  if (ignoreModules.length > 0) {
+    plugins.push(ignoreModulesPlugin(ignoreModules));
+  }
+  plugins.push(stripNodePrefixPlugin());
+  if (usePostBuild) {
+    plugins.push(postBuildPlugin(outdir, rootDir));
+  }
+
+  console.log(`\nBuilding ${regularFile}...`);
+  await esbuild({
+    bundle: true,
+    treeShaking: true,
+    logLevel: "warning",
+    entryPoints: [path.join(rootDir, "src/transformers.js")],
+    platform,
+    format,
+    outfile: path.join(outdir, regularFile),
+    sourcemap: true,
+    external: externalModules,
+    plugins,
+    logOverride: {
+      // Suppress import.meta warning for CJS builds - it's handled gracefully in the code
+      "empty-import-meta": "silent",
+    },
+  });
+  reportSize(path.join(outdir, regularFile));
+
+  console.log(`\nBuilding ${minFile}...`);
+  await esbuild({
+    bundle: true,
+    treeShaking: true,
+    logLevel: "warning",
+    entryPoints: [path.join(rootDir, "src/transformers.js")],
+    platform,
+    format,
+    outfile: path.join(outdir, minFile),
+    sourcemap: true,
+    minify: true,
+    external: externalModules,
+    plugins,
+    legalComments: "none",
+    logOverride: {
+      // Suppress import.meta warning for CJS builds - it's handled gracefully in the code
+      "empty-import-meta": "silent",
+    },
+  });
+  reportSize(path.join(outdir, minFile));
+}
+
+console.log("\nBuilding transformers.js with esbuild...\n");
+
+const startTime = performance.now();
+
+try {
+  console.log("=== CLEAN ===");
+  execSync(`rimraf ${DIST_FOLDER}`, { stdio: "inherit" });
+
+  // Bundle build - bundles everything except ignored modules
+  console.log("\n=== Bundle Build (ESM) ===");
+  await buildTarget({
+    name: "",
+    suffix: ".js",
+    format: "esm",
+    ignoreModules: WEB_IGNORE_MODULES,
+    externalModules: [],
+    usePostBuild: true,
+  });
+
+  // Web build - external onnxruntime libs
+  console.log("\n=== Web Build (ESM) ===");
+  await buildTarget({
+    name: ".web",
+    suffix: ".js",
+    format: "esm",
+    ignoreModules: WEB_IGNORE_MODULES,
+    externalModules: WEB_EXTERNAL_MODULES,
+    usePostBuild: false,
+  });
+
+  // Node ESM build
+  console.log("\n=== Node Build (ESM) ===");
+  await buildTarget({
+    name: ".node",
+    suffix: ".mjs",
+    format: "esm",
+    ignoreModules: NODE_IGNORE_MODULES,
+    externalModules: NODE_EXTERNAL_MODULES,
+    usePostBuild: false,
+  });
+
+  // Node CJS build
+  console.log("\n=== Node Build (CJS) ===");
+  await buildTarget({
+    name: ".node",
+    suffix: ".cjs",
+    format: "cjs",
+    ignoreModules: NODE_IGNORE_MODULES,
+    externalModules: NODE_EXTERNAL_MODULES,
+    usePostBuild: false,
+  });
+
+  const endTime = performance.now();
+  const duration = (endTime - startTime).toFixed(2);
+  console.log(`\nAll builds completed successfully in ${duration}ms!\n`);
+} catch (error) {
+  console.error("\nBuild failed:", error);
+  process.exit(1);
+}

scripts/esbuild/build/constants.mjs

@@ -0,0 +1,13 @@
+export const DIST_FOLDER = "dist";
+export const NODE_IGNORE_MODULES = ["onnxruntime-web"];
+export const NODE_EXTERNAL_MODULES = [
+  "onnxruntime-common",
+  "onnxruntime-node",
+  "sharp",
+  "node:fs",
+  "node:path",
+  "node:url",
+];
+
+export const WEB_IGNORE_MODULES = ["onnxruntime-node", "sharp", "fs", "path", "url", "stream", "stream/promises"];
+export const WEB_EXTERNAL_MODULES = ["onnxruntime-common", "onnxruntime-web"];

scripts/esbuild/build/httpServer.mjs

@@ -0,0 +1,73 @@
+import { createServer } from "node:http";
+import { existsSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+
+const MIME_TYPES = {
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".mjs": "text/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".wasm": "application/wasm",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+};
+
+export const startServer = (dir, PORT = 8080) => new Promise(resolve =>{
+  const server = createServer((req, res) => {
+    // Enable CORS
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+
+    let filePath = req.url === "/" ? "/index.html" : req.url;
+    filePath = filePath.split("?")[0]; // Remove query params
+
+    // Try to serve from outdir first, then fall back to rootDir
+    let fullPath = path.join(dir, filePath);
+
+    // Check if file exists
+    if (!existsSync(fullPath)) {
+      res.writeHead(404, { "Content-Type": "text/plain" });
+      res.end("404 Not Found");
+      return;
+    }
+
+    // Check if it's a directory
+    const stat = statSync(fullPath);
+    if (stat.isDirectory()) {
+      fullPath = path.join(fullPath, "index.html");
+      if (!existsSync(fullPath)) {
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("404 Not Found");
+        return;
+      }
+    }
+
+    // Get MIME type
+    const ext = path.extname(fullPath);
+    const mimeType = MIME_TYPES[ext] || "application/octet-stream";
+
+    try {
+      const content = readFileSync(fullPath);
+      res.writeHead(200, { "Content-Type": mimeType });
+      res.end(content);
+    } catch (error) {
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end("500 Internal Server Error");
+    }
+  });
+
+  server.listen(PORT, () => {
+    resolve(server);
+  });
+});

scripts/esbuild/build/plugins/ignoreModulesPlugin.mjs

@@ -0,0 +1,33 @@
+/**
+ * Plugin to ignore/exclude certain modules by returning an empty module.
+ * Equivalent to webpack's resolve.alias with false value.
+ */
+export const ignoreModulesPlugin = (modules = []) => ({
+  name: "ignore-modules",
+  setup(build) {
+    // Escape special regex characters in module names
+    const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const escapedModules = modules.map(escapeRegex);
+
+    // Match both "module" and "node:module" patterns
+    const patterns = escapedModules.flatMap(mod => [mod, `node:${mod}`]);
+    const filter = new RegExp(`^(${patterns.join("|")})$`);
+
+    build.onResolve({ filter }, (args) => {
+      return { path: args.path, namespace: "ignore-modules" };
+    });
+    build.onLoad({ filter: /.*/, namespace: "ignore-modules" }, () => {
+      return {
+        contents: `
+          const noop = () => {};
+          const emptyObj = {};
+          export default emptyObj;
+          export const Readable = { fromWeb: noop };
+          export const pipeline = noop;
+          export const createWriteStream = noop;
+          export const createReadStream = noop;
+        `
+      };
+    });
+  },
+});

scripts/esbuild/build/plugins/postBuildPlugin.mjs

@@ -0,0 +1,41 @@
+import path from "node:path";
+import { copyFileSync, unlinkSync, existsSync } from "node:fs";
+
+/**
+ * Plugin to post-process build files.
+ * Equivalent to webpack's PostBuildPlugin.
+ */
+export const postBuildPlugin = (distDir, rootDir) => {
+  // it should copy the files only once. In watch mode for example it should not rerun every time
+  let completed = false;
+  return {
+    name: "post-build",
+    setup(build) {
+      build.onEnd(() => {
+        if (completed) return;
+        completed = true;
+
+        const ORT_JSEP_FILE = 'ort-wasm-simd-threaded.jsep.mjs';
+        const ORT_BUNDLE_FILE = 'ort.bundle.min.mjs';
+
+        // 1. Remove unnecessary files
+        const file = path.join(distDir, ORT_BUNDLE_FILE);
+        if (existsSync(file)) unlinkSync(file);
+
+        // 2. Copy unbundled JSEP file
+        try {
+          const ORT_SOURCE_DIR = path.join(
+            rootDir,
+            "node_modules/onnxruntime-web/dist",
+          );
+          const src = path.join(ORT_SOURCE_DIR, ORT_JSEP_FILE);
+          const dest = path.join(distDir, ORT_JSEP_FILE);
+          copyFileSync(src, dest);
+          console.log(`Copied ${ORT_JSEP_FILE}`);
+        } catch (error) {
+          console.warn(`!!! Warning: Could not copy ${ORT_JSEP_FILE}:`, error.message);
+        }
+      });
+    },
+  };
+};

scripts/esbuild/build/plugins/rebuildPlugin.mjs

@@ -0,0 +1,26 @@
+/**
+ * Plugin to log rebuild events with timing
+ */
+export const rebuildPlugin = (name) => {
+  let startTime = 0;
+
+  return {
+    name: "rebuild-logger",
+    setup(build) {
+      build.onStart(() => {
+        startTime = performance.now();
+      });
+
+      build.onEnd((result) => {
+        const endTime = performance.now();
+        const duration = (endTime - startTime).toFixed(2);
+
+        if (result.errors.length > 0) {
+          console.log(`\n${name} - Build failed with ${result.errors.length} error(s) in ${duration}ms`);
+        } else {
+          console.log(`\n${name} - Rebuilt in ${duration}ms`);
+        }
+      });
+    },
+  };
+};

scripts/esbuild/build/plugins/stripNodePrefixPlugin.mjs

@@ -0,0 +1,15 @@
+/**
+ * Plugin to strip the "node:" prefix from module requests.
+ * Equivalent to webpack's StripNodePrefixPlugin.
+ */
+export const stripNodePrefixPlugin = () => ({
+  name: "strip-node-prefix",
+  setup(build) {
+    build.onResolve({ filter: /^node:/ }, (args) => {
+      return {
+        path: args.path.replace(/^node:/, ""),
+        external: true,
+      };
+    });
+  },
+});