Compiling multiple JS files

support
1

I’ve got hugo doing some heavy lifting for me and compiling multiple different javascript files on build, and it was previously working great until I started using Splide as a node package. Now it is only grabbing the one file.

In Javascript.HTML partial:

{{- $jsNavigation := resources.Get "js/navigation.js" -}}
{{- $jsSlider := resources.Get "js/slider.js" -}}

{{- $scripts := slice $jsNavigation $jsSlider | resources.Concat "js/main.js" -}}
{{- $scripts = $scripts | js.Build -}}
{{- if hugo.IsProduction -}}
  {{- $scripts = $scripts | minify -}}
{{- end -}}
<script type="text/javascript">{{- $scripts.Content | safeJS -}}</script>

Navigation.JS

function openNav() {
  document.getElementById("mySidenav").style.width = "450px";
  document.body.style.overflow = "hidden";
  document.getElementById("overlay").style.display = "block"
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.overflow = "auto";
  document.getElementById("overlay").style.display = "none"
}

Slider.JS
(Previously, this had some custom slider code, and it worked fine)

import Splide from "@splidejs/splide";

new Splide( '#image-carousel', {
  type       : 'fade',
  autoplay   : true,
  rewind     : true,
} ).mount();

Now, in either production or development, it no longer pulls in the navigation file. Rather, it’s just pulling in the Slider.JS file.

2

This is the result of esbuild’s tree shaking.

3

What gets me is that it works fine with the import Splide from "@splidejs/splide"; bit!

But I also notice in the compiled source that my own code below the import is inserted after the main Splide code, but before the Splide copyright info.

It’s quite confusing. I’ve resorted to just adding my code for my nav menu in later, manually.

4

Those functions are not exported—esbuild determines they’re not used, so removes them.

1 Like