bundlify-express v1.2.0
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 referencedir/file2.js
which will be translated tosourcePath/dir/file2.js
. Relative paths may (or may not) start with./
prefix (./file.js
andfile.js
are equal).Absolute (relative to
sourcePath
) - starts with/
, for example:/dir/file.js
translates tosourcePath/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).