What is the "proper"/best-practice way to add additional JavaScript libraries to a Magento project?

Question

I have seen a couple different methods. I'm wondering if there is a best practice?

I know Magento stores JavaScript libraries in /lib, and I know how to include those in a module using RequireJS.

In a couple places, I have just copy/pasted JavaScript library files into a module-specific folder...it doesn't feel right, but it works.

My question is: If I wanted to include a library like React (which would be used by ALL modules) - how would I do that?

Copy paste into /lib? NPM install...?

Answer 1

You can have a file src/app/design/frontend/Vendor/theme/requirejs-config.js This require will be done for your theme. So any file in the theme will have access; moreover any further theme extending your core theme will also have access.

That's how I would handle things if you really need something everywhere and it's not already covered by magento.

As an exemple, i'm importing Dompurify for security purpose everywhere

var config = {
 paths: {
 'slick': 'slick/slick.min',
 'scrollToFixed':'js/jquery-scrolltofixed-min',
 'magnificPopup':'magnific_popup/jquery.magnific-popup.min',
 'DOMPurify': 'js/purify.min'
 },
 shim: {
 'scrollToFixed': {
 deps: ['jquery']
 },
 'DOMPurify': {
 'exports': 'DOMPurify'
 }
 }
};

That being said most of the time i've recovered the files directly and setted them in the location i wanted to inside the theme (web folder)

Ex

app/design/frontend/Vendor/theme/web/js/purify.min.js

I guess npm could also be a solution, in that case it would go directly to the vendor; so I guess it should be available automatically (not sure); if not, may be just adjusting the link from the require to point the vendor should be enough ?