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.
- 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
require syntax (synchronous) on the
handlebars NPM module, and then use a
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)
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
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
handlebars NPM module. To lighten your bundle for the browser (by using a shared instance of
use jenkins-js-builder to create your app bundle (in your
gulpfile.js), telling it to "map" (transform) all
require calls for
handlebars to async
imports of the
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
(see below) in a way that just works.