When on Moovweb, does the javascript have to bundled into one file?

Question

I'm working in the Moovweb SDK. So far all the javascript I have used has been placed into the javascript's "main" folder, where it is bundled into the main.js file. Can we split out the javascript files, and just include what we need to per page, rather than bundling all the script together?

Answer 1

To add individual Javascript files using the Moovweb SDK, use the insert() function in the appropriate TS file.

You can add an individual Javascript files from your project's assets/ folder using:

insert("script", type: "text/javascript", src: asset("javascript/MY_JS_FILE.js"))

You can add a remotely hosted Javascript file as well w the same technique:

insert("script", type: "text/javascript", src: "//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")

If you want this Javascript file added across your entire site, you'd add the line of code to the html.ts file. If you want this Javascript file only on the home page, place the line of code in the pages/home.ts file. And so on ... you get the idea!

---

By default, as in the docs, the Moovweb SDK places all your JS files in the assets/javascript/main, bundles it and serves it as main.js.

Using the technique above, you can easily not use the bundling and serve the JS files individually instead.

Answer 2

You can also scope your JavaScript to only apply to certain pages.

If you're following the convention of adding a class to the body of all your transformed pages, then you can easily use that to identify what pages your JavaScript runs on.

For example:

x$(document).on("DOMContentLoaded", function() {
  x$("body._home").each(function() {
    // my javascript
  });
});

Will run your JS only on the pages with the body that has the class "_home".

This way your JavaScript is still bundled with the other scripts.