Rollup Handlebars Helpers

Question

I am trying to use rollup on my project in which I also use handlebars. In particular, I am using a simple helper for one of the templates. I found 3 different rollup plugins for handlebars and have tried all of them. The closest I've gotten to having it work is using rollup-plugin-handlebars-plus.

Here is the rollup.config.js:

import resolve from 'rollup-plugin-node-resolve';
import handlebars from 'rollup-plugin-handlebars-plus';
// import handlebars from 'rollup-plugin-handlebars';
///import handlebars from 'rollup-plugin-hbs';
import commonjs from 'rollup-plugin-commonjs';


export default {
    // tell rollup our main entry point
    input:'assets/js/exp.js',
    output: {
      name: 'rootmont',
      file: 'build/js/main.min.js',
        format: 'iife',
        globals: {
            jquery: '$'
        }
        // format: 'umd'
    },
    plugins: [
        resolve({
            // pass custom options to the resolve plugin
            customResolveOptions: {
              moduleDirectory: [ 'node_modules']
            }
        }),
        commonjs({
            include: 'node_modules/**',
        }),
        handlebars({
            helpers:['assets/js/handlebarsHelpers.js'],
             // templateExtension: '.html'
        })
    ],
};

Here is handlebarsHelpers.js:

export default function(Handlebars) {
    Handlebars.registerHelper( 'percent', function( number ) {
        let num = number * 100;
        num = Math.round( num * 100 ) / 100;
        return num;
    });
}

And here is pct.hbs:

<div>
{{#each data}}
<tr>
    <td>
        {{@key}}
    </td>
    <td>
        {{percent this}}%
    </td>
</tr>
{{/each}}
</div>

After I do rollup -c in the command line, here is the output.

assets/js/exp.js → build/js/main.min.js... (!) Unresolved dependencies https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency assets/js/handlebarsHelpers.js (imported by assets/hbs/pct.hbs) (!) Missing global variable name Use output.globals to specify browser global variable names corresponding to external modules assets/js/handlebarsHelpers.js (guessing 'Helpers0')

It says handlebarsHelpers.js is imported by pct.hbs, which it isn't but maybe that's a result of preprocessing. It seems like I need to explicitly import handlebarsHelpers.js somewhere to get rollup to put it in the bundle. But, doing so presents it's own problems, like having to import the handlebars and fs library, which seems like the wrong way.

Anyone know what I'm missing here?

I think it will be easier to help if you share something like a github where we can reproduce. — Gilsdav

V. Sambor V. Sambor · Accepted Answer · 2019-06-13T18:58:36

Try to do something like this in your rollup.config.js:

{
  external: [
    'assets/js/handlebarsHelpers.js'
  ],
  output: {
    globals: {
      'assets/js/handlebarsHelpers.js': 'Helpers0',
    },
    ...
  },
  ...
}

It would be nice to have a repo for reproducing though...

Rollup Handlebars Helpers

1 Answers