OK, I’ve spent three hours figuring something out which would be ridiculously simple in plain old HTML. How do I add a 3rd party JS library to be used in a template (the library is not in NPM or Atmosphere). Please, I’ve tried everything I could find. It’s a client side form validation library, jquery.formance.js…
If not using es2015 modules then add the the file to your lib folder and magically it’s in your project. If you ARE using modules, then make a lib folder inside you imports folder. Import the library as you would any other file in your project.
Depending on your use case, you can also scope $.getScript to something like an onCreated, and host the js file somewhere.
Sounds quirky, but when you are looking at a seldom-used script that could be a sizable chunk of your payload, this may be a solution.
Thank you for your responses. The solution that is working for me is placing the js file in public/js then using $.getScript in the template’s onCreated.
The canonical (read Meteor Classic) way of doing this is to put the js files into the client/compatibility/ folder. This still works in Meteor today, but there can be issues with load order, especially with jquery plugins.
lib folders actually have load priority just for this purpose. client/lib would be for client only libraries
It’s true that files in lib/ are loaded first, but they are also loaded alphabetically, so you may still have to artificially prefix filenames to enforce load order.
However, the main purpose of client/compatibility/ is that files loaded from there are not wrapped in self-running functions, which ensures that local variables are exposed.
2 Likes