Is it ok to refer to node_modules directly?

Question

The project I'm currently working on (Java/JSP) currently uses no package manager to manage its JavaScript dependencies.

The used libraries are just committed under version control, and referred as such from the JSP pages...

I would like to evolve to a workflow were we would use a package manager (e.g. yarn), and later on eventually also webpack to further optimise the build.

I would like to do this in a phased approach. As I have little to none experience with such a frontend workflow, I have some questions:

1. Would it be weird to just start with defining the used libraries in a package.json file, and use yarn to manage to package?

yarn will then fetch the modules and store them in the node_modules folder.

2. Is it bad practice to refer to the scripts in that node_modules folder directly from within the JSP files?

Example

package.json:

"dependencies": {
    "jquery": "^3.4.1"
}

app.jsp:

<script src="node_modules/jquery/dist/jquery.min.js"></script>

Answer 1

1. Yes, that's completely ok. It's the way we normally initialize frontend projects (probably sometimes, some higher-level script does it for us but still). Just run npm init.

2. Oh yes, that's quite bad. Most probably, it simply will not work. If you want to load something directly on a page, you need a cdn version.

To be honest, having a package.json is not that useful without a building tool like webpack, gulp or grunt.

UPD: Regarding why loading things directly from node_modules might hurt:

A lot of modern JS packages (like, for instance, React) use modules that are not implemented yet in any browser or ES5+ syntax which is supported only by some browsers.

This way, you may load React directly but it will crash in any browser with something like import is not defined.

Basically, a lot of modern packages expect you to either have a building tool or use cdn version.

Honestly, I don't know how many packages let you seamlessly load things directly from node_modules.

So, in your particular situation, I'd say that if particular packages you use let you do so & are shipped with browser-compatible version, you can just go ahead & do it this way.

Nevertheless, I see it highly possible that sooner or later you will face a package that will not let you to include it this way (or worse: it will, but will crash some browsers that don't support latest JS features/introduce other nasty bugs in your app).

Hopefully, at this stage, you will already have the building tool configured.

Bonus: Relatively recently some browsers started to support modules!

There are even tools like snowpack that do something particularly similar to what you are looking for.

Even though, you still need to be very careful with this. Direct inclusion of lodash.js, for instance, will generate 640 GETs (check out this article -> "Libraries" section).