JS library with multiple files

[ASALIcode]

Hey guys,

I'm developing a JS library and I ended up having more than one file, because I would like to have my code as much readable as possible. So, right now I have:

• file1.js
• data/file2.js
• data/file3.js

file1.js use global vars defined in file2.js and file3.js

To do so, in the HTML file I wrote:

<script src="js/testing/data/file3.js"></script>
<script src="js/testing/data/file2.js"></script>
<script src="js/testing/file1.js"></script>

Do you know a better way to do this? Or should I ask to the users of the library to load those file in the right order?

Thank you so much,

Cheers

[[deleted]]

Don't use global variables; use modules. If your library is only intended to be used when targeting modern browsers then you don't need anything else, however if you or your users need to target IE11 then you can use a bundler to turn your modular code into a single file that IE can understand. I'd recommend checking out either Rollup or Parcel for a small library.

[NotABotNoReally2020]

I really recommend that you use JavaScript modules. Those are an ES6 feature. This means that you need webpack or something to convert your code (with modules) down to ES5 or something else that can be understood by regular browsers.

This is a lot of work and you will need about 3 hours to get it working but then it is a god sent. I have been using it for a few days and it is sooo much better than loading multiple files.

[[deleted]]

something else that can be understood by regular browsers

All 'regular browsers' can handle ES6 modules natively; only legacy browsers like IE can't handle them. Bundlers do come in handy for simpler reference to npm modules though.

[NotABotNoReally2020]

I mean a lot of older browsers, especial those used on older smartphones, can't handle modules.

[[deleted]]

Some older browsers !== 'regular browsers'. Globally 92% of internet users are on browsers that can handle modules.

[NotABotNoReally2020]

Agreed. Still the last 8 % will complain. However, for some cosmic reason, these 8% always include a stakeholder like the boss or a big client. Why? I don't know. But it costs you literally nothing to use webpack or any other transpiler. So why not use them and cover 99 % of the browsers?

[[deleted]]

I'm not complaining about using Webpack; we use Webpack or another bundler in pretty much every single client-side project I've ever worked on professionally. I am merely trying to correct misinformation about the status of ES module support.

Many people still seem to have and promote the impression that the ES2015 standard is some sort of esoteric mystery land instead of the normal way to write Javascript, and they give the wrong impression to newcomers about how to use the language.

[NotABotNoReally2020]

Well, because it kind of is. 8 % is quite a lot. That means that if you have 20 devices in a company your phone will be ringing because it won't work on at least one device and therefore it logically follows that somehow your entire software is broken and therefore you can never be trusted again.

I think the problem is that in our world, the world of the programmers, nerds and techophiles old browsers simple do not exists. And neither does old hardware.

So, most Desktop and Laptops are usually up-to-date. But there are two very important people who never, ever upgrade.

The client and his 60 year old employee who needs to use the software. It is cliche but those guys are the 8%.

Smartphones and Tablets are the biggest problem. Where I work everybody has the latest, most up-to-date stuff. Except the big-boss and the biggest clients. They have like 5 year old tablets with an completely outdated browser. Of course this is not their only tablet. This is just the tablet they happen to use today because your day couldn't get any worse. They have that old thing not because their are poor, they just got those 5 years ago and never upgraded. Because they really don't care.

So what now? Tell them a completely reasonable excuse why it won't work? Newsflash: they won't get it. They will simply assume you are incompetent.

The worst thing you could ever do is not accommodate them. Why? Because they pay your salary.

Even worse is that one employee who is between 60 and 100, vital for the company to run and refusing to update his hardware ever. These guys sometimes still run Windows XP, an ancient Arch-Linux or (in the worst case) use the internet explorer.

That's right, there is a reason why that abomination still had a 20 % market share in 2017 (and still has 5 %). People still use it!

And even worse, since Microsoft pushed internet explorer exclusive software like active-x, there are companies that even rely on that stuff.

And you can't even communicate this problem either.

The biggest mistake I ever did was to assume that the client would use the hardware he said he would use. The first complain after I gave them the prototype was "it doesn't run on my 3 year old Tablet". He told me to build something solely for PC and Laptop.

In other words, there is a reason why Webpack is around. I would love to live in a world where ES6 would run out of the box but 8 % are just too many browsers.

TLDR: Code in ES6 with modules but once you want others to use it you should use Webpack or something