Cannot get local minified JS file working

support
1

I have this partial that adds JS files to the footer of my page: FTW-Website/layouts/_partials/assets/js-footer.html at master · NormPlum/FTW-Website · GitHub

It works when the List.js file is pulled in from the CDN URL. However when I comment that out and un-comment the code to use the local List.js instead, it doesn’t work…

What am I doing wrong in trying to use a local JS file instead of an external one?

2

You are compiling an already compiled JS file is what I understand. Remove the js.Build part… Something like this:

{{ with resources.Get "js/list.min.js" }}
  <script src="{{ .RelPermalink }}"></script>
{{ end }}

or retrieve the original source files and build yourself.

3

Thank you, that was the problem.

What is compiling when it comes to JS files? I couldn’t see anything in the documentation about this…

4

To clarify, what’s the difference between compiling the JS file I wrote, and not compiling the one I downloaded?

If the one I wrote doesn’t actually need compiling, what does compiling do then? What’s the benefit?

5

I hope this is not you https://www.reddit.com/r/gohugo/comments/1snyggc/hugos_docs_suck/

6

I would not call it compiling. Thats not what js.Build does. from the docs at: js.Build

js.Build

Bundle, transpile, tree shake, and minify JavaScript resources.

if you don’t want ro do such things with your js. don’t build it, just reference it.

did not replay your setup but maybe u use the wrong options… does not work is quite general.

7

Why would that be me? I find the docs very helpful - they’re what have helped me understand and learn what I have so far to setup Hugo with the site I’m building.

8

Based on @davidsneighbour’s post above I learnt to just reference the JS instead of using the build command(s). My subsequent questions have been around trying to understand what the build commands do…

When I was trying to use it, I didn’t specify any options (so was just using the defaults). This should have meant not trying to minify an already a minified file, so I’m not sure why it wasn’t working.

By “does not work” I meant that the JS wasn’t being included, so the search/filtering wasn’t working.

9

mmh, difficult to say with the exact scenario, but some reason is

  • caching by the browser - so the reference is correct
  • and the file is there but the browser does not pick it up.
  • old stuff in public - cleaning public and/or restarting the server helps often. this, in my experience depends on what exactly changes.

imho using js.build on a minified resource should work…just superfluous.

anyhow hard to tell without a replayable setup…

10

Did the link to my repo in the initial post not help?

11

joined late…the code has changed just had a quick view at the commit history. think i will pickup the old state and play on the weekend.

12

I think the conversation went a bit away from the whole topic :slight_smile:

What happened in my opinion was that js.Build took something already
“prepared” and tried to prepare it again. Can’t make fried eggs from an omelette, so to say. The min in the file name indicates that all this optimisation was already done on the file. I think the min-less version of the CDN file would have no problems with js.Build.

The reason, in my opinion, is, that the min-file was already touched by esbuild, which would rename functions, replace variable names etc. instead of just removing whitespaces.

Long story short: use js.Build on UNPREPARED JavaScript code. I don’t think CDN files will work with that because (function of a CDN) they did all the preparing for you already and those files up there are for “dropping them in a script tag”.

You typically go to the original package location and create your file from src/. So either know what you do and use js.Build, or use a script tag and put it in and forget it. “Official” CDNs are there to make life easier for you and tend to be around stable enough, have cache headers that don’t make your site slower and minify more or less optimal.

13

Indeed.

This makes sense. However it doesn’t seem to be the case that the ‘min’-less version works with js.Build.

I made a small project to test this: GitHub - NormPlum/hugo-js-test · GitHub

The file to look at is layouts/baseof.html. As it is currently (running js.Build on list.js), it doesn’t work. But if you comment out lines 12-14 and uncomment line 11, then it does work…

14

As Me and @davidsneighbour stated that’s superfluous and the correct way to use a CDN file is: just use it as is.

To close the loop.

as I said it’s in the options you use the default setup.

Your test.js fails because it tries to create an object of type List. BUT you bundled the list.js to an IIFE which creates a self executing function and hides the List type inside. see format option

change your js.Build line to:

    {{- with . | js.Build (dict "format" "cjs" "minify" "false") }}

special:

  • esbuild is capable of doing such things, but then you must dig in all that JS, format, coding and esbuild stuff.
  • if you turn on minify in the above, the class name will change (in my case to “M”) maybe there’s an option to avoid that, but