rucksack

JavaScript and CSS bundler using Vite.

Installation

$ npm i rucksack

Example

import Rucksack from "rucksack/index.js"

const __dirname = new URL(".", import.meta.url).pathname;

// Create a new bundler
let bundler = new Rucksack({
    name: "my-app",
    bundle_dir: `${__dirname}/output`,
    bundle_url: "/static",
    input: `${__dirname}/js-and-css-with-assets/main.js`,
    production: true,
    watch: false,
    config: async (existingConfig) => {
        existingConfig.build.rollupOptions.output.format = "es"
        return existingConfig
    }
})

// Add remote url as resource
bundler.add("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js")

bundler.bundle();
// vite v7.3.1 building client environment for production...
// ✓ 3 modules transformed.
// example/output/bg.svg      1.82 kB │ gzip: 0.66 kB
// example/output/my-app.css  0.08 kB │ gzip: 0.09 kB
// example/output/my-app.js   0.12 kB │ gzip: 0.11 kB
// ✓ built in 158ms

console.log(bundler.html())
// <script src="/static/my-app.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
// <link rel="stylesheet" href="/static/my-app.css" />

Documentation

Rucksack(options)

Creates a new instance of Rucksack.

Params

• Object options: The options object:
  • name (String): The bundle name.
  • bundle_dir (String): The bundle directory.
  • bundle_url (String): The bundle URL.
  • input (String): The input file.
  • aliases (Object): A map of aliases for module resolution.
  • production (Boolean): Whether to bundle for production.
  • watch (Boolean): Whether to watch files for changes.
  • config (Function): An async function to modify the Vite config.

Return

• Object The Rucksack instance containing:
  • options (Object): The options object.
  • bundle_paths (Object): The bundle paths:
    • js (String): The JS bundle path.
    • css (String): The CSS bundle path.
  • bundle_urls (Object): The bundle URLs:
    • js (String): The JS bundle URL.
    • css (String): The CSS bundle URL.
  • local (Object): The local resources collection.
    • js (Array): The JS resources.
    • css (Array): The CSS resources.
  • remote (Object): The remote resources collection.
    • js (Array): The JS resources.
    • css (Array): The CSS resources.
  • markup (Object): The cached HTML markup:
    • js (String): The JS HTML markup.
    • css (String): The CSS HTML markup.
    • all (String): The combined HTML markup.

bundleJS()

Bundles JavaScript files using Vite.

Return

• Promise A promise that resolves when the JavaScript bundling is complete.

How to contribute

Have an idea? Found a bug? See how to contribute.

License

See the LICENSE file.