npm global installed packages and a automated and recursive build process

OK so, I have a WordPress site which a custom theme and several custom plugins (mu-plugins to be exact) which all use the exact same build processes. That is to say, they all have package.json files and use webpack. Technically there are a couple gulpfiles but I am migrating those to webpack configs.

So I want to be able to deploy my app, and after composer install all the plugins and theme, I would have a node script run which would:

1. Install all the NPM packages the build processes need - but install them globally
2. CD into the custom theme's src directory and run webpack --config webpack.production.js to build the theme's assets
3. CD into each of the custom plugins' src directories and run web run webpack --config webpack.production.js to build each plugin's assets in their respective locations

By doing this, I hope to

• avoid committing compiled assets to my repos
• avoid committing 3rd party packages to my repos
• cut down on deployment time (because all packages would be installed globally, and only 1 time vs in each location)

I have already written the node scripts which:

• installs the NPM packages
• sets the node_path and node_prefix settings so my webpack (and gulp) scripts know where to find things
• and CDs into each location and runs something like
  • This script simply runs child_process('webpack --config webpack.production.js' {cwd:' whatever/plugin/src'})

Now, the issues I having are (and how I have fixed some of them):

• while my init node script could find node modules, the spawned processes that ran webpack could not
  • fixed this by setting NODE_PATH before the npm run command or by adding the node path via export in my .profile scrip
• webpack files were unable to find the various loaders
  • fixed this by adding the global node path to the resolveLoaders option
• my scss files couldn't find 3rd party packages like bulma
  • I fixed this by including the global node_modules path into the includePaths arg for sass-loader

The last, well most current issue I am facing is with webpack and vuejs.

I get this error:

ERROR in (webpack)/node_modules/timers-browserify/main.js
Module not found: Error: Can't resolve 'setimmediate' in '/usr/local/bin/npm-global/lib/node_modules/webpack/node_modules/timers-browserify'
 @ (webpack)/node_modules/timers-browserify/main.js 54:0-23
 @ /usr/local/bin/npm-global/lib/node_modules/vue/dist/vue.js
 @ ./src/js/entry.js
 @ ./src/entry.js

timers-browserify is apparently a dependency of VueJs. My entry js file has this vue import:

import Vue from 'vue/dist/vue';

and that appears to be throwing the error. If I remove it then webpack compiles everything as expected. If I install my node_modules in that folder (there is a package.json file in there) then it also compiles as expected.

I have already updated my webpack config to "resolve" module and loader dependencies to use their globally installed locations:

  resolve: {
    // Configure how Webpack finds modules imported with `import`.
    modules: [
      '/usr/local/bin/npm-global/lib/node_modules',
      path.resolve(__dirname, 'node_modules'),
    ],
},
  resolveLoader: {
    // Configure how Webpack finds `loader` modules.
    modules: [
      '/usr/local/bin/npm-global/lib/node_modules',
      path.resolve(__dirname, 'node_modules'),
    ],
},```


So it seems that Vue, or maybe some npm packages in general seem to have some expectations of where certain node_modules live?

This is likely going to be a continuous issue with the path I have decided on so I want to know whats causing it or what to look for?

One way I can fix this is by symlinking my globally install node_module folder into each plugin/theme.  But I still want to know what is causing this as this entire process has exposed me to a couple concepts that have just helped me in general so I feel like the answer to this problem might also do the same.

from npm global installed packages and a automated and recursive build process