# rucksack-lite

> The base class for the Rucksack JavaScript and CSS bundler.

Latest version **6.0.0** (published 2026-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rucksack-lite
pnpm add rucksack-lite
yarn add rucksack-lite
bun add rucksack-lite
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2026-01-07 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bloggify |
| Maintainers | ionicabizau |
| Keywords | rucksack, javascript, and, css, bundler |

## Links

- npm: https://www.npmjs.com/package/rucksack-lite
- Repository: https://github.com/Bloggify/rucksack-lite
- Homepage: https://github.com/Bloggify/rucksack-lite#readme
- Issues: https://github.com/Bloggify/rucksack-lite/issues
- npm.io page: https://npm.io/package/rucksack-lite

## Dependencies (1)

- [url-remote](https://npm.io/package/url-remote.md) ^3.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 6.0.0 (latest) — 2026-01-07
- 5.0.2 — 2024-03-25
- 5.0.1 — 2023-02-15
- 5.0.0 — 2023-02-15
- 4.0.4 — 2020-08-09
- 4.0.3 — 2020-01-23
- 4.0.2 — 2017-11-28
- 4.0.1 — 2017-11-28
- 4.0.0 — 2017-11-28
- 3.0.0 — 2017-11-28

## README

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


















# rucksack-lite

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







> The base class for the Rucksack JavaScript and CSS bundler.






For bundling, use [`rucksack`](https://github.com/Bloggify/rucksack).












## :cloud: Installation

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

# Using yarn
yarn add rucksack-lite
```













## :clipboard: Example



```js
import RucksackLite from "../lib/index.js";

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

const r = new RucksackLite({
  name: "my-app",
  bundle_dir: `${__dirname}/output`,
  bundle_url: "/static",
  input: "main.js"
});

r.add("https://example.com/index.js");
r.add("https://example.com/styles.css");

console.log(r.html())
// <script src="/static/my-app.js"></script>
// <script src="https://example.com/index.js"></script>
// <link rel="stylesheet" href="/static/my-app.css" />
// <link rel="stylesheet" href="https://example.com/styles.css" />
```











## :memo: Documentation


### `RucksackLite(options)`
Creates a new instance of `RuckasckLite`.

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

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

### `add(resource)`
Adds the resource to the list.

#### Params

- **String|Array|RucksackResource** `resource`: The resource path or object or an array of resources.

#### Return
- **RucksackResource** The resource object.

### bundle

Bundles the JavaScript and CSS resources.

#### Return
- **Promise** A promise object.

### `toArray()`
Creates an array of resource objects. Optionally, a type can be provided to filter the results.

E.g.:

```js
[
   {RucksackResource},
   {RucksackResource},
   ...
]
```

#### Return
- **Array** The resources list.

### `cssHtml()`
Generates the HTML markup for CSS assets.

#### Return
- **String** The HTML markup.

### `jsHtml()`
Generates the HTML markup for JS assets.

#### Return
- **String** The HTML markup.

### `html(resources)`
Generates the HTML for both CSS and JS assets. Optionally, a custom array can be provided.

#### Params

- **Array** `resources`: An array of resources.

#### Return
- **String** The HTML markup.

### `refreshMarkup()`
Refreshes the cached HTML markup.

### `RucksackResource(resource)`
Creates a new instance of `RucksackResource`.

#### Params

- **String|Object** `resource`: The resource path or object containing:
  - `path` (String): The resource path.
  - `type` (String): The resource type. Either `js` or `css`.
  - `root` (String): The root path.

#### Return
- **RucksackResource** The resource instance containing:
  - `path` (String): The resource path.
  - `root` (String): The root path.
  - `type` (String): The resource type. Either `js` or `css`.
  - `source_type` (String): The source type. Either `local` or `remote`.
  - `uri` (String): The resource URI (full path).









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

---
_Source: https://npm.io/package/rucksack-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._