Build Status

Compacts, processes and bundles code for inclusion in the browser. Uses browserify and babel to process source files, and makes the processed file available via a static route.

Installation

npm install nxus-clientjs --save

Configuration Options

  'client_js': {
    'babel': {}, // Babel specific options. Defaults to the project .babelrc file
    'routePrefix': '/assets/clientjs', // static route used to serve compiled assets
    'assetFolder': '.tmp/clientjs', // local dir to write compiled scripts
    'webcomponentsURL': 'js/wc-min.js', // URL to include for WC polyfill
    'reincludeComponentScripts': {} // components to ignore from babel compilation but include in scripts
  }

Usage

To use the module, there are two steps: 1) create the bundle, and 2) include/inject the source into your page.

Creating the bundle

app.get('clientjs').bundle('/my/local/file.js', '/browser/path/to/file.js')

Include/inject the source file

You can either include the output path as specified when you creatd the bundle

<script source='/browser/path/to/file.js'></script>

Or using Nxus Templater, you can inject the script by passing the output path to the script key on render or using the Templater lifecycle events.

app.get('templater').render('my-template', {scripts: ['/browser/path/to/file.js']})

Or

app.get('templater').on('renderContext.my-template', () => {
     return {scripts: ['/browser/path/to/file.js']}
})

Using ClientJS with Babel transforms

You will need to install the necessary Babel presets and plugins in your application, and add Babel configuration options to the clientjs section of your .nxusrc file. For example:

    npm install --save babel-preset-es2015 \
      babel-plugin-transform-function-bind \
      babel-plugin-transform-object-rest-spread
    "client_js": {
        ...
      "babel": {
        "presets": [ "es2015" ],
        "plugins": [
          "transform-function-bind",
          "transform-object-rest-spread"
        ]
      }
    }
new ClientJS()

Extends NxusModule

Instance Members
includeScript(templateName, script)
includeComponent(templateName, script)
bundle(entry, output)