1.2.0 • Published 8 years ago

bundlify-express v1.2.0

Weekly downloads
-
License
ISC
Repository
github
Last release
8 years ago

bundlify-express

Bundle client side javascript into one single, minified file without using ES6 import/export or CommonJS modules.

Features

  • Reference a Javascript file in your template. Get it, and all dependencies, in the right order, in the page.

  • CI Friendly. No separate build process. No command line tools.

  • Declare dependencies as comments.

  • Debug mode returns individual javascript files to the browser and dynamically responds to your changes.

  • Production mode bundles all javascript into a single minified bundle using Uglify.

  • Use all the same javascript libraries and files you're already using.

  • Reference node modules.

Compatibility

This package uses some of the ES6 features like: class, let, forEach, find, map, Set, arrow functions, Promise. You should check what version you are running:

  • 5.12.0 - 4.4.5 - node must be run with --use_strict argument.

  • latest - 6.0.0 - works excellent.

For more info: http://node.green/

Install

npm install bundlify-express

Usage

Require

First require bundlify-express module:

var bundlify = require('bundlify-express')({
    entryPoints: ['app.module.js'],
    sourcePath: 'path/to/source/files',
    buildPath: 'path/to/build/dir',
    outputPath: 'path/in/template'
});

However only entryPoints is required.

Set locals

Then add:

app.locals.bundle = bundlify.provider();

Use middleware

This should be added right before anything that might call req.render() like for example routes.

app.use(bundlify.middleware);

Use bundle getter in templates

In template add:

!= bundle.get('app.module.js')

Note that app.module.js is the same as specified in entryPoints.

In development mode output would something like this:

<script src="/path/in/template/app.module.js"></script>
<script src="/path/in/template/core.module.js"></script>
<script src="/path/in/template/core.service.js"></script>
<script src="/path/in/template/navigation/navigation.component.js"></script>

And in production mode all those scripts are merged, minified and then you get:

<script src="path/in/template/f498dfbdc7ca01edd38baf49d0277a63.js"></script>

The gathering and sorting of dependencies is done automatically. In development mode bundles are reassembled if there are any changes to the source files. In production, node must be restarted before a new minified bundle is generated.

Reference files

To reference other js file you can use JS reference style:
// @reference ./path/to/file.js

This gives you ability to combine multiple references into single one:

// @reference ./path/to/file.js ./path/to/otherFile.js

Alternatively you can use XML style (only single path per reference):

/// <reference path=”./path/to/file.js” />

There are 2 types of references:

  • Relative - path is translated relatively to file when reference is written, for example in sourcePath/file1.js there is a reference dir/file2.js which will be translated to sourcePath/dir/file2.js. Relative paths may (or may not) start with ./ prefix ( ./file.js and file.js are equal).

  • Absolute (relative to sourcePath) - starts with /, for example: /dir/file.js translates to sourcePath/dir/file.js.

You can also reference node module file:

// @reference node_modules/path/to/file.js

or

// @reference _/path/to/file.js

or

// @reference -/path/to/file.js

Both _ and - are aliases to node_modules.

Example provided in example_refs folder.

Examples

Examples are provided in:

  • example_4.13_jade- Express 4.13 with jade.

  • example_4.14_pug- Express 4.14 with pug.

  • example_refs - References and paths example.

Use: npm install then npm start to run the server.

Options

  • entryPoints: Array - Specifies all entry point of bundles. Required!

  • sourcePath: String - Path to folder with source files. Default: ./public/javascripts/.

  • buildPath: String - Actual path to folder where built bundle will be stored.
    Default:./public/javascripts/.

  • outputPath: String - Virtual (mount) path to files that will be outputted to templates.
    Default: /javascripts/.

  • production: Boolean - Preety self explanatory. If true, bundlify is in production mode, meaning it will build bundle only once on start. Default: false.

  • treshold: Number/Integer - Used in when parsing files, it defines how many non-reference lines the parser will read before giving up. Default: 2.

  • nodeModulesPath: String - Path to directory with node modules, but when referencing modules in scripts use only: node_modules, _ or -. Default: ./node_modules/.

Future plans

  • Reference external file.

  • Resolve circular references.

Background

Original idea was made by Charlotte Gore (https://github.com/CharlotteGore/Cassette-Express).