Lasso.js

Lasso.js is an eBay open source Node.js-style JavaScript module bundler that also provides first-level support for optimally delivering JavaScript, CSS, images and other assets to the browser.

This tool offers many different optimizations such as a bundling, code splitting, lazy loading, conditional dependencies, compression and fingerprinted resource URLs. Plugins are provided to support pre-processors and compilers such as Less, Stylus and Marko. This developer-friendly tool does not require that you change the way that you already code and can easily be adopted by existing applications.

Example

Install the command line interface for Lasso.js:

npm install lasso-cli --global

Install a helper module from npm:

npm install change-case

Create the main Node.js JavaScript module file:

main.js:

var changeCase = require('change-case');
console.log(changeCase.titleCase('hello world')); // Output: 'Hello World'

Create a StyleSheet for the page:

style.css

body {
    background-color: #5B83AD;
}

Create an HTML page to host the application:

my-page.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lasso.js Demo</title>
</head>
<body>
    <h1>Lasso.js Demo</h1>
</body>
</html>

Run the following command:

lasso style.css \
    --main main.js \
    --inject-into my-page.html

Output:

Output for page "my-page":
  Resource bundle files:
    static/my-page-9ac9985e.js
    static/my-page-1ae3e9bf.css
  HTML slots file:
    build/my-page.html.json
  Updated HTML file:
    my-page.html

Open up my-page.html in your web browser and in the JavaScript console you will see the output of our program running in the browser, as well as a page styled by style.css.

As you can see, with Lasso.js you no longer have to struggle with managing complex build scripts. Simply let Lasso.js worry about generating all of the required resource bundles and injecting them into your page so that you can just focus on writing clean and modular code.

There's also a JavaScript API, taglib and a collection of plugins to make your job as a front-end web developer easier. Please read on to learn how you can easily utilize Lasso.js in your application.

Design Philosophy
Features
Another Client-side Bundler?
Installation
Usage
- Command Line Interface
- JSON Configuration File
- Dependencies
- Asynchronous/Lazy Loading
- Using the JavaScript API
- Lasso.js Taglib
  - Using Lasso.js Taglib with Marko
  - <lasso-img>
- Client/Server Template Rendering
- Runtime Optimization with Express
- Bundling
- Code Splitting
Configuration
- Default Configuration
- Complete Configuration
Node.js-style Module Support
Babel Support
No Conflict Builds
Custom attributes for Script & Style tags
- Use of defer/async with script tags
Content Security Policy Support
Available Plugins
Extending Lasso.js
- Custom Plugins
- Custom Dependency Types
- Custom Output Transforms
JavaScript API
AMD Compatibility
Sample Projects
Discuss
Maintainers
Contributors
Contribute
License

Design Philosophy

Dependencies should be declarative or discovered via static code analysis
Common module loading patterns should be supported
Must be extensible to support all types of resources
Maximize productivity in development
Maximize performance in production
Must be easy to adopt and not change how you write your code
Can be used at runtime or build time
Must be configurable

Features

Bundle Client-side Dependencies
- Supports all types of front-end resources (JavaScript, CSS, images, Less, CoffeeScript, etc.)
- Asynchronous/lazy loading of JS/CSS
- Configurable resource bundling
- Code splitting
- JavaScript minification
- CSS minification
- Fingerprinted resource URLs
- Prefix resources with CDN host name
- Optional Base64 image encoding inside CSS files
- Custom output transforms
- Declarative browser-side package dependencies using simple browser.json files
- endencies
- Image minification
- etc.
Browser-side Node.js Module Loader
- Full support for Isomorphic JavaScript
- Conflict-free CommonJS module loader for the browser
- Complete compatibility with Node.js
  - Supports module.exports, exports, require, require.resolve, __dirname, __filename, process, etc.
- Supports the package.json browser field
- Full support for browserify shims and transforms
- Maintains line numbers in wrapped code
Developer Friendly
- Generates the HTML markup required to include bundled resources
- Disable bundling and minification in development
- Line numbers are maintained for Node.js modules source
- Extremely fast incremental builds!
  - Only modified bundles are written to disk
  - Disk caches are utilized to avoid repeating the same work
Dependency Compilation
- Less
- Marko
- Dust
- etc.
Extensible
- Custom dependency compilers
- Custom code transforms
- Custom bundle writers
- Custom plugins
Configurable
- Configurable resource bundles
- Enable/disable transforms
- Development-mode versus production-mode
- Enable/disable fingerprints
- etc.
Flexible
- Integrate with build tools
- Use with Express or any other web development framework
- JavaScript API, CLI and taglib
Security
- Supports the nonce attribute when using Content Security Policy for extra security.
Future
- Automatic image sprites

Another Client-side Bundler?

Browserify is an excellent JavaScript module bundler. We are huge supporters of writing Node.js-style modules (i.e. CommonJS), and we also believe npm is an excellent package manager. If you are not using a JavaScript module bundler then you are absolutely missing out. Modularity is equally important for client-side code as it is for server-side code, and a JavaScript module bundler should be part of every front-end developer's toolbox.

So why did we create Lasso.js if Browserify is such a great tool? We created Lasso.js because we wanted a top-notch JavaScript module bundler that also provides first-level support for transporting CSS, "plain" JavaScript, images, fonts and other front-end assets to the browser in the most optimal way. In addition, we want to enable developers to easily create web applications that follow widely accepted rules for creating faster-loading websites (such as putting StyleSheets at the top, and JavaScript at the bottom). We also want to allow for developers to easily load additional JavaScript and StyleSheets after the initial page load.

While high performance is very important for production systems, we want to also provide a more developer-friendly experience by offering fast, incremental builds, simplifying development and by producing debuggable output code. And, of course, we do not want developers to have to learn how to code their applications in a new way so Lasso.js was built to not change how you already code. You'll even find support for Browserify shims and transforms. Therefore, if you try out Lasso.js and it is not the tool for you, then feel free to switch back to something else (it'll of course be ready if your application's requirements change in the future). eBay and other large companies rely on Lasso.js for delivering high performance websites and are committed to its

Lasso

Install / Use

README

Lasso.js

Example

Table of Contents

Design Philosophy

Features

Another Client-side Bundler?