Search code examples
javascriptnode.jsnpmgulphalfmoon

How do I bundle npm Halfmoon's JS with existing code via Gulp?


So, I want to use the Halfmoon framework in a personal project and I have it downloaded via npm. In order to use the Javascript it shows as an example (in this page https://www.gethalfmoon.com/docs/download/#using-npm) to import the library with a require statement.

var halfmoon = require("halfmoon");
halfmoon.onDOMContentLoaded();

I was hoping to bundle this code with any future Javascript files into one large scripts.js file, but require statements do not work in browsers.

Browserify seemed like a good option, but there is no up-to-date plugin for gulp. Ran into similar issues with Rollup where the gulp plugin was problematic.

My hope was to have a gulp function structured like this:

function bundle() {
    
    return gulp.src('./src/js/main.js')
        .pipe(theFunctionThatMakesItWork())
        .pipe(gulp.dest('./static/js'));
}

I am not completely attached to doing this in gulp but that would be my preference.


Solution

  • I am not entirely sure if this will work, but you could probably try downloading the halfmoon.js file on Github. It is different from the one in npm, mainly that it is meant to run using the <script> tag, and doesn't need the require statement.

    Link to the file on Github: https://github.com/halfmoonui/halfmoon/blob/master/js/halfmoon.js

    Edit: Also, on this file, the halfmoonOnDOMContentLoaded() is run automatically when the DOM is loaded.