nxus-clientjs

Table of Contents

• ClientJS
• Installation
• Configuration Options
• Usage
  • Creating a bundle for manual inclusion in a template
  • Using ClientJS with Babel
  • includeScript
    • Parameters
  • bundle
    • Parameters

ClientJS

Extends NxusModule

Compacts, processes and bundles code for inclusion in the browser. Uses webpack 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
    'watchify': true, // Whether to have webpack watch for changes
    'minify': true, // Whether to have webpack minify output
    'sourceMap': 'source-map', // Sourcemap devtool option for webpack
    'webpackConfig': {}, // Additional webpack config, merged with default
    'appendRulesConfig': false, // should webpack config rules be merged or replace the default
    'routePrefix': '/assets/clientjs', // static route used to serve compiled assets
    'assetFolder': '.tmp/clientjs', // local dir to write compiled scripts
    'webcomponentsURL': '/js/webcomponentsjs/webcomponents-lite.min.js', // URL for WC polyfill
    'buildNone': false, // For production, to skip any bundling if pre-building during deploy
    'buildOnly': false, // For building during deploy scripts
    'buildSeries': false // Whether to run bundle builds in series instead of parallel, for deploy scripts
  }

Usage

ClientJS supports bundling scripts using webpack and processing them with babel. The resulting file is served from a temporary location with the necessary script tags inserted for a given template.

app.get('clientjs').includeScript('my-template', __dirname+"/js/entry.js")

Creating a bundle for manual inclusion in a template

These are the low-level steps that includeScript performs:

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

The bundle will be accessible at the route prefix + output path in your browser.

You can include the script in your template either manually:

<script src='/assets/clientjs/path/to/file.js'></script>

Or using Nxus Templater:

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

Or

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

Using ClientJS with Babel

The default configuration includes babel-loader with @babel/preset-env. You can customize the Babel configuration through the webpackConfig option.

includeScript

Injects the passed script entry into to the specified template after webpack/babel

Parameters

• templateName String the name of the template to include the script into
• script [type] the path of the script file to include

bundle

Create a clientjs bundle that can be injected into a rendered page.

Parameters

• entry [type] the source file to bundle
• output [type] the output path to use in the browser to access the bundled source