nxus-clientjs

nxus-clientjs

watcher

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. Defaults to the project .babelrc file options
    'watchify': true, // Whether to have webpack watch for changes - add your js to .nxusrc 'ignore' if so
    'minify': true, // Whether to have webpack minify output
    'sourceMap': 'cheap-module-eval-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/wc-min.js', // URL to include 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 currently supports bundling scripts from a JS file entry point or Polymer web components HTML file entry point using webpack. Both options will serve the resulting file from a temporary location and process the results using babel if configured, and insert the necessary script tags 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')

Serve the bundled path using router.staticRoute:

app.get('router').staticRoute('/browser/path/to', '/path/to/serve')

Then 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"
        ]
      }
    }

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

includeComponent

Parameters

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

Meta

• deprecated: (Deprecated, includeScript now handles this.) Injects the passed web component entry into to the specified template after bundling/babel

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