<!-- Please do not edit this file. Edit the `blah` field in the `package.json` instead. If in doubt, open an issue. -->


[![rucksack](http://i.imgur.com/hSPcrjC.png)](#)


# rucksack

 [![Version](https://img.shields.io/npm/v/rucksack.svg)](https://www.npmjs.com/package/rucksack) [![Downloads](https://img.shields.io/npm/dt/rucksack.svg)](https://www.npmjs.com/package/rucksack)


> JavaScript and CSS bundler using Vite.


## :cloud: Installation

```sh
# Using npm
npm install --save rucksack

# Using yarn
yarn add rucksack
```


## :clipboard: Example


```js
import Rucksack from "rucksack"

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" />
```


## :memo: 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.


## :question: Get Help

There are few ways to get help:


 1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question.
 2. For bug reports and feature requests, open issues. :bug:


## :yum: How to contribute
Have an idea? Found a bug? See [how to contribute][contributing].


## :scroll: License

[MIT][license] © [Bloggify][website]


[license]: /LICENSE
[website]: https://bloggify.org
[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md