FuseBox is a JavaScript module bundler and loader that gained traction for its speed and 'zero configuration' approach to common tasks, especially with TypeScript. It previously offered features like Hot Module Replacement (HMR), a development server, and built-in Rollup support. The project released its v4.0.0 version, which notably shifted its configuration paradigm from programmatic JavaScript/TypeScript files to an XML-based system using `fusebox.xml` and `circuit.xml` files. However, the `fuse-box` GitHub repository was archived by its owner on June 20, 2023, and is now read-only. This indicates that while FuseBox v4 exists, it is no longer actively maintained or developed, and the project is considered abandoned. During its active development, key differentiators included reported blazing fast bundle times (50-100ms rebuilds), first-class TypeScript support without extensive configuration, and a comprehensive loader API supporting 'arithmetic instructions' and wildcard imports.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Configuration files are primarily CommonJS (Node.js) using `require` for instantiating the bundler, especially in v3. While ES module `import` might be used in application code, the bundler configuration itself typically uses `require`.
const { FuseBox } = require('fuse-box');
Plugins are exposed as named exports from the main `fuse-box` package. The `plugins` directory is not typically imported directly.
const { WebIndexPlugin } = require('fuse-box');
This quickstart demonstrates how to configure FuseBox for a basic TypeScript project, including setting up a development server with Hot Module Replacement (HMR) and a production build with minification and HTML generation. This configuration style is typical for FuseBox v3.x.
import { FuseBox, WebIndexPlugin, CSSPlugin, QuantumPlugin } from "fuse-box";
import * as path from "path";
async function bundleApp() {
const isProduction = process.env.NODE_ENV === "production";
const fuse = FuseBox.init({
homeDir: "src", // Your source code directory
output: "dist/$name.js", // Output bundled files to dist/
target: "browser", // Target browser environment
hash: isProduction, // Add hash to filenames in production
plugins: [
CSSPlugin(), // Process CSS files
WebIndexPlugin({ template: "src/index.html" }), // Generate index.html
isProduction && QuantumPlugin({
uglify: true, // Minify JavaScript
css: true, // Minify CSS
}),
].filter(Boolean),
log: !isProduction,
debug: !isProduction,
});
// Setup development server with HMR for non-production builds
if (!isProduction) {
fuse.dev({ port: 4444, httpServer: true });
fuse.bundle("app")
.instructions(`>index.ts`) // Entry point
.hmr() // Enable Hot Module Reloading
.watch(); // Watch for changes
} else {
// Production bundle
fuse.bundle("app")
.instructions(`>index.ts`);
}
await fuse.run();
console.log("FuseBox bundling complete!");
}
bundleApp().catch(console.error);
// To make this runnable, ensure you have:
// 1. A 'src' directory with 'index.ts' (e.g., console.log("Hello from FuseBox!");)
// 2. A 'src/index.html' (e.g., <body><div id="root"></div></body>)
// 3. Run with `NODE_ENV=development ts-node fuse.ts` or `NODE_ENV=production ts-node fuse.ts`
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.