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.
npm install nxus-clientjs --save
'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
}
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")
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']}
})
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"
]
}
}
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 intoscript
[type] the path of the script file to include
Parameters
templateName
String the name of the template to include the script intoscript
[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
Create a clientjs bundle that can be injected into a rendered page.
Parameters
entry
[type] the source file to bundleoutput
[type] the output path to use in the browser to access the bundled source