Lasso.js is a build tool and runtime library for building and bundling all of the resources needed by a web application
npm install @awly/lassoLasso.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.
Install the command line interface for Lasso.js:
``text`
npm install lasso-cli --global
Install a helper module from npm:
`text`
npm install change-case
Create the main Node.js JavaScript module file:
__main.js:__
`javascript`
var changeCase = require('change-case');
console.log(changeCase.titleCase('hello world')); // Output: 'Hello World'
Create a StyleSheet for the page:
__style.css__
`css`
body {
background-color: #5B83AD;
}
Create an HTML page to host the application:
__my-page.html:__
`html`
Lasso.js Demo
Run the following command:
`bash`
lasso style.css \
--main main.js \
--inject-into my-page.html
Output:
`text`
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
- External Dependencies
- Dependency Attributes
- Conditional Dependencies
- Enabling Flags
- Asynchronous/Lazy Loading
- Using the JavaScript API
- Configuring the Default Lasso
- Optimizing a Page
- Creating a New Lasso
- Lasso.js Taglib
- Using Lasso.js Taglib with Marko
-
- 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
- Content Security Policy Support
- Available Plugins
- Extending Lasso.js
- Custom Plugins
- Custom Dependency Types
- Custom JavaScript Dependency Type
- Custom CSS Dependency Type
- Custom Package Type
- Custom Output Transforms
- JavaScript API
- AMD Compatibility
- Sample Projects
- Discuss
- Maintainers
- Contributors
- Contribute
- License
* 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
* 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 filesmodule.exports
* 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 , exports, require, require.resolve, __dirname, __filename, process, etc.browser
* Supports the package.json 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
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 success. If you try it out and find gaps, please let us know!
The following command should be used to install the lasso module into your project:
`bash`
npm install lasso --save
If you would like to use the available command line interface, then you should install the lasso-cli module globally using the following command:
`bash`
npm install lasso-cli --global
__Sample App:__ To try out and experiment with the code, please see the following project:
lasso-js-samples/lasso-cli
Install the command line interface for Lasso.js:
`bash`
npm install lasso-cli --global
In an empty directory, initialize a new Node.js project using the following command:
`bash`
mkdir my-app
cd my-app
npm init
Install required modules into the new project:
`bash`
npm install jquery
npm install lasso-less
Create the following files:
__add.js:__
`javascript`
module.exports = function(a, b) {
return a + b;
};
__main.js:__
`javascript
var add = require('./add');
var jquery = require('jquery');
jquery(function() {
$(document.body).append('2+2=' + add(2, 2));
});
`
__style.less:__
`css
@headerColor: #5B83AD;
h1 {
color: @headerColor;
}
`
__my-page.html:__
`html`
Lasso.js Demo
Finally, run the following command to generate the resource bundles for the page and to also inject the required