How do you add custom javascript utilities and expose them to any .js file in a project?

[munael]

Imagine a utils.js file with a bunch of functions.

I'd like to access those functions in .eleventy.js, _data/*.js, and others.

Adding a utils = require("/_scripts/utils.js"); of some sort is fine. I just don't know how to do it.

Full disclaimer: I have near zero webdev experience 😅. Just making do with guessing based on behavior from desktop-bound languages. So the above is the behavior I'm looking for, but I don't mind what form it takes if it's not over-complicated.

[munael]

What works so far:

1. Create a src/_scripts/utils.js.
2. Import it in every file that needs it by relative paths as, for example, utils = require("./../../../_scripts/utils.js").

Here's what doesn't:

1. Functions in utils.js, defined by function Func(...){}, see this as undefined when invoked inside functions in the data section.
2. VS Code intellisense doesn't understand the import at all. utils does not exist, and the path itself in the require is marked as an error.
   • Forgot the const. It has to be const utils = require(...);.

[j-f1]

I’m not sure about TypeScript support (but you may be able to make use of jsconfig.js?), but you can write global.foo = function (...) {} in one file and then access foo in any file run after that file executes. For example, you could include require("./utils") in your config file, and anything you define there will be accessible to all templates and data files.

[munael]

Can you clarify where TypeScript applies in this scenario?

To be clear, I'd love to use it for eleventy dev scripts instead of JS, but that's a separate question. If they're somehow connected that solving one solves the other, all the better. I'm just not following how.

[j-f1]

VS Code’s intellisense is powered by TypeScript, even if you are using regular JS. But feel free to ignore that if you’re not customizing it.

[munael]

Oh, I should clarify that the issue with this is that it appears as undefined at runtime, not just in the intellisense (which I'd like to get working in extension files, but that's different).

I have types in the main eleventy file using @panoply/eleventy. Can't get it to work in other files besides .eleventy.js. For example by getting a ts compile pre-step added to eleventy.

[j-f1]

this is complicated enough in JS that you’d probably have better results with globalThis or global (globalThis is the standardized version of global)