Monday, 10 June 2019

Rollup Handlebars Helpers

I am trying to use rollup on my project in which I also use handlebars, in particular I use 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>

<tr>
    <td>
        
    </td>
    <td>
        %
    </td>
</tr>

</div>

The output, when I do rollup -c in the command line, is this

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?



from Rollup Handlebars Helpers

No comments:

Post a Comment