import this bundle (see jenkins-js-modules) into your application bundle (in your plugin etc) instead of bundling Handlebars in your application bundle, making your app bundle considerably lighter.
Your plugin needs to add a dependency on this plugin (to ensure it gets installed in Jenkins).
<artifactItem> <groupId>org.jenkins-ci.ui</groupId> <artifactId>handlebars</artifactId> <version>[VERSION]</version> </artifactItem>
See wiki.jenkins-ci.org to get the latest version.
Using Handlebars v3:
- Bundle Id:
Using this bundle via the lower level
import syntax (asynchronous) is not very easy because of how the Handlebarsify module interacts with the bundling process. For that reason, it is highly recommended to use the higher level
require syntax (synchronous) on the
handlebars NPM module, and then use a
withExternalModuleMapping instruction (jenkins-js-builder) in the app bundle's
In either case, you should also add dev dependencies on the relevant Handlebars NPM packages:
npm install --save-dev jenkins-handlebars-rt hbsfy@2 handlebars@3
If using jenkins-js-builder to create yor application bundle, you can code your application's CommonJS modules to use the more simple CommonJS style
require syntax (synch), as opposed to the lower level
import syntax (async) of jenkins-js-modules.
When doing it this way, your module code should require the standard
handlebars NPM module (you should really only need to access handlebars if registering helpers - Handlebarsify looks after normal templating) e.g.
var handlebars = require('handlebars'); handlebars.registerHelper(name, helper);
The above code will work fine as is, but the only downside is that your app bundle will be very bloated as it will include the
handlebars NPM module. To lighten your bundle for the browser (by using a shared instance of
handlebars), use jenkins-js-builder to create your app bundle (in your
gulpfile.js), telling it to "map" (transform) all synchronous
require calls for
handlebars to async
imports of the
handlebars:handlebars3 bundle (which actually
var builder = require('jenkins-js-builder'); // // Use the predefined tasks from jenkins-js-builder. // builder.defineTasks(['test', 'bundle']); // // Create the app bundle, mapping sync require calls for 'handlebars' to // async imports of 'handlebars:handlebars3'. // builder.bundle('src/main/js/myapp.js') .withExternalModuleMapping('handlebars', 'handlebars:handlebars3') .inDir('src/main/webapp/bundles');
All of the above "magically" translates the appropriate bits of your app bundle's JS code to use async
import calls (see below) in a way that just works.