I have taken over a stalled, somewhat legacy JS project of a web front-end. It basically uses jQuery to register event handlers on the DOM, perform AJAX requests to a back-end and manipulate the DOM according to the result.
The project consists of a handful of scripts in a
./scripts/main directory, some NPM packages in
./node_modules and some other 3rd-party scripts which have randomly and statically been placed below either
-+ |- package.json |- gulpfile.js |- scripts/ | |- main/ # the actual project source code |- modules/ # statically 3rd-party deps outside of NPM |- deps/ # see above, simply other folder
There is a Gulp file which "transpiles" everything into a single
main.js script which in turn is shipped as the client-side JS file by the parent project. (Note, the JS project only realizes the client-side code, the server-side is organized in a parent project written in PHP).
There are several things about the build system which strikes me to be wrong.
Dependencies are listed in the
package.json file for NPM and in
main.path.scripts = [...]. In particular, the latter lists specific paths to JS files inside the folder
main.path.scripts = [..., "node_modules/lazysizes/lazysizes.min.js", ...]. I don't know how NPM and Gulp are supposed to interact with each other, but this redudancy seems to be wrong.
My IDE yells at me that those methods and objects which come from NPM modules are undefined and wants me to add
import statements to the source code. While this seems logical to me, it breaks the final code, when I do so.
The question is simple: How are NPM, Gulp and JS
import supposed to work together?
In the long run, I want to gradually convert the project to use Vue.js, but as a first step I would like to clean up the build system.
Unfortunately, my own JS experiences dates back to the time when JS projects basically consisted of a couple of files plus jQuery without any build and package system at all. I already tried to find some good overview guide which explains the big picture, but mostly I found guides which build complete backend projects with Node.js or guides for Gulp but without reference to NPM.