Compiling multiple script bundles using NPM and Watchify

Question

I have a project where I'd like to compile separate script bundles - one main one that gets included on every page and a bunch of separate bundles that will get included only on specific pages.

I have a NPM script that looks like this:

"build-site": "watchify Scripts/site.js -o Scripts/bundle.js -v -d .",
"build-student": "watchify Scripts/modules/student.js -o Scripts/student_bundle.js -v -d .",
"start": "npm run build-site | npm run build-student",

So I run npm start and Watchify kicks in and starts watching the files. This part works well enough.

Whenever I make a change to the student module, both files get recompiled (no problem) but when I go to view the page in the browser I get an error that the module 'site.js' could not be found.

If I then go to the site.js file and modify something, the recompile occurs but this time it works well in the browser.

So the crux of it is that when I try to compile one file, I have to make a change to the other to get that to compile properly as well. I feel like the way I'm doing it is kind of unstable but I can't find much information on bundling multiple files with Watchify.

To summarise my question: How can I compile multiple bundles with Watchify in a way that avoids the above problem?

Does 'student.js' have a require('Scripts/site.js') ? – Jerome Anthony Mar 05 '15 at 00:02 — Jerome Anthony, Mar 05 '15 at 00:02
@JeromeAnthony yes it does. – Nick Coad Mar 05 '15 at 01:11 — Nick Coad, Mar 05 '15 at 01:11

score 2 · Answer 1 · answered Mar 11 '15 at 04:49

I don't have enough rep to comment, so I'll post it here.

You didn't add directory structure.

Should it be

"build-site": "watchify Scripts/modules/site.js -o Scripts/bundle.js -v -d ."

changing site.js path from Scripts/file to Scripts/module/file

Can't be sure, I can't see the directory layout.

score 0 · Accepted Answer · answered Mar 12 '15 at 00:16

The problem seems to have been a pretty simple one in the end. One of the files I was trying to compile was actually being included in the other file.

I suspect what was happening was site.js was being compiled and locked by npm, then compiling of student.js was starting up before site.js was ready.

I fixed this by removing the redundancy and not compiling site.js by itself. It now gets included by student.js and I simply include student_bundle.js on the page instead of both site.js AND student_bundle.js.

Compiling multiple script bundles using NPM and Watchify

2 Answers2