Quickbundle

2.16.0 · active · verified Tue Apr 21

Quickbundle is a zero-configuration transpiler and bundler for web projects, currently at version 2.16.0. It aims to simplify the build process by allowing developers to define build artifacts directly in `package.json`. The library boasts fast build and watch modes, leveraging powerful underlying tools such as Rollup and SWC. It supports various module formats (CJS, ESM), loaders for JavaScript, TypeScript, JSX, JSON, and Images, and includes TypeScript declaration file bundling. A key differentiator is its ability to compile and cross-compile standalone executables for environments without Node.js. The project has a frequent release cadence, with minor and patch updates often occurring multiple times a month, primarily focused on dependency updates and feature enhancements like dynamic import support.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up and run a build using `quickbundle` for a TypeScript project, primarily showing its CLI usage which is the recommended zero-config approach.

import { bundle } from 'quickbundle';
import * as path from 'path';
import * as fs from 'fs/promises';

const entryPoint = path.resolve(__dirname, 'src/index.ts');
const outputDir = path.resolve(__dirname, 'dist');
const outputFile = path.join(outputDir, 'bundle.js');

async function buildMyProject() {
  try {
    await fs.mkdir(outputDir, { recursive: true });
    console.log(`Bundling ${entryPoint} to ${outputFile}...`);

    // Quickbundle typically works via package.json config, but for a programmatic example,
    // one might infer a direct API if exposed. This example assumes a simplified programmatic `bundle`.
    // In reality, Quickbundle heavily relies on `package.json` configuration for its zero-config approach.
    // A common setup would involve `package.json`: { "source": "src/index.ts", "main": "dist/bundle.js" }
    // Then simply `npx quickbundle build`.

    // For demonstration, simulating a programmatic call, though direct programmatic API details aren't provided.
    // This would likely involve spawning a child process or having an internal API for such.
    console.log('Using `npx quickbundle build` as the primary programmatic equivalent...');
    const { execa } = await import('execa'); // Using execa for cross-platform command execution
    const { stdout } = await execa('npx', ['quickbundle', 'build'], { 
      cwd: process.cwd(), // Or the project root
      stdio: 'inherit' // Stream output to current process
    });
    
    console.log('Build output:');
    console.log(stdout);
    console.log('Project bundled successfully!');
  } catch (error) {
    console.error('Failed to bundle project:', error);
    process.exit(1);
  }
}

buildMyProject();

// To make this runnable, ensure you have a `package.json` like this in your project root:
/*
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "source": "src/index.ts",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "quickbundle build"
  },
  "peerDependencies": {
    "typescript": "^4.7.0 || ^5.0.0"
  },
  "devDependencies": {
    "quickbundle": "^2.0.0",
    "typescript": "^5.0.0",
    "execa": "^8.0.0"
  }
}
*/

// And a 'src/index.ts' file:
/*
export const greet = (name: string) => `Hello, ${name}!`;

const appDiv: HTMLElement | null = document.getElementById('app');
if (appDiv) {
  appDiv.innerHTML = `<h1>${greet('Quickbundle User')}</h1>`;
}

console.log(greet('World from Quickbundle'));
*/

view raw JSON →