rucksack-lite

The base class for the Rucksack JavaScript and CSS bundler.

For bundling, use rucksack.

:cloud: Installation

# Using npm
npm install --save rucksack-lite

# Using yarn
yarn add rucksack-lite

:clipboard: Example

const Rucksack = require("rucksack-lite");


const r = new Rucksack({
    jsUrl: "my-bundle.js"
  , cssUrl: "my-bundle.css"
});

// Local files are supposed to be added via `rucksack`
// (which implements bundling)
// Those will *not* appear in the HTML output
r.add(`${__dirname}/data/bar.css`);
r.add(`${__dirname}/data/main.css`);

// On the other side, remote scripts and styles *will* appear
// in the output, because they don't need bundling.
r.add("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.js");
r.add("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css", false);

console.log(bundler.html())

:question: Get Help

There are few ways to get help:

1. Please post questions on Stack Overflow. 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:

:memo: Documentation

constructor

Ruckasck Creates a new instance of Ruckasck.

Params

• Object opts: The Rucksack options.

Return

• Object The Rucksack instance.

add(resPath, root)

Downloads the script from the resource file.

Params

• String resPath: The path of the resource.
• String root: The file's root path.

addJS(resPath, inline)

Downloads the JS scripts from the resource.

Params

• String resPath: The path of the resource.
• Boolean inline: Confirms if the resource needs to be downloaded or not.

addCSS(resPath, inline)

Adds a new CSS path.

Params

• String resPath: The CSS resource path to add.
• Boolean inline: Whether to add the CSS content inline or not.

bundle()

Bundles the JavaScript and CSS resources.

Return

• Promise A promise object.

toObject()

Creates an array of elements containing the resource type and the url.

E.g.:

[
 { type: "script", url: "https://.../myscript.js" },
 ...
 { type: "stylesheet", url: "https://.../mystyle.css" },
]

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 optional array of assets.

Return

• String The HTML markup.

:yum: How to contribute

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

:dizzy: Where is this library used?

If you are using this library in one of your projects, add it in this list. :sparkles:

• rucksack

:scroll: License

MIT © Bloggify