share node_modules directory between multiple projects

Question

I am a java developer learning EC6. I use npm to download JavaScript packages and webpack to create the final bundle.js file.

I have a nice project folder which contains java modules with java files and I would like to add EC6 JavaScript files to my web-modules. I use maven to manage the java jar dependency libraries.

This is my folder structure:

my-project
  |-common-module
  |-ejb-module
  |-web-module-1
  |   |-src
  |       |-main
  |           |-java
  |               |-com.a.b
  |                   |-Hello.java
  |           |-webapp
  |               |-index.jsp
  |               |-bundle.js
  |               |-package.json
  |               |-webpack.config.js
  |               |-WEB-INF
  |               |-node_modules <-- I WANT THIS FOLDER TO BE MOVED AWAY FROM HERE 
  |               |-app          <-- react + ec6 javascript files
  |                   |-action
  |                   |-components
  |                   |-...
  |-web-module-2
      |-<same structure then under web-module-1>

When I execute npm install... command in my-project/web-module-1/src/main/webapp folder then a new directory with name of node_modules is created by npm under webapp directory. This folder contains tons of files.

My problem is that when I work on my 2nd web project and execute the same npm install... command then a second node_modules directory is created with the same content under my-project/web-module-2/src/main/webapp directory.

Can I use a common, separated node_modules directory to avoid the duplicated files and save disk space? Can I store js dependencies under ex. /home/user/javascript/modules folder?

Comment 1: I do not want to execute npm as a root and use npm -g install!

Comment 2: I do not want to create symlinks as well.

Could you please help me?

---

EDIT What i did:

• I have created a new folder for the JS packages: /home/user/javascript-modules.
• Copied package.json file to /home/user/javascript-modules.
• npm install --prefix /home/user/javascript-modules

After that the necessary JS modules are copied to my javascript-modules/node-modules directory. Nice!

But when I try to execute webpack then i get a missing module error:

• cd my-project/web-module-1/src/main/webapp
• ./home/user/javascript-modules/node_modules/.bin/webpack

Result:

Hash: a6bf1a0d210729a54be9
Version: webpack 1.14.0
Time: 39ms

ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /home/user/java/intellijmy-project/web-module-1/src/main/webapp

Comment: My webpack.config.js files contains a line with this content: loader: 'babel-loader'

Is there any way to specify the "classpath" for webpack? I mean to tell to webpack where are a modules.

---

UPDATE As you can see in the comments I have tried to solve my issue on many different ways without any success. For me it seems that what I wanted to do is not supported by webpack. That so sad :(

That is it. If some has any working, nice and complete solution please share it with us. Thanks.

Answer 1

Use pnpm instead of npm.

From the pnpm project's website:

pnpm uses hard links and symlinks to save one version of a module only ever once on a disk. When using npm or Yarn for example, if you have 100 projects using the same version of lodash, you will have 100 copies of lodash on disk. With pnpm, lodash will be saved in a single place on the disk and a hard link will put it into the node_modules where it should be installed.

1. To install using npm in a command window use:

    npm install -g pnpm
   

2. To update your existing package installations (and all subdirectories) use:

    pnpm install --recursive
   

or, use the shortcut command for recursive install:

    pnpm i -r

Use pnpm anywhere you would typically use npm. (This commands safely falls back to npm functions when not supported by pnpm.

Answer 2

Inorder to get npm to install in a directory of custom location,you need to run:

npm install --prefix path_to_node_modules_location

Edit : it is not possible to have the local folder without the package.json with it.

The only 'common location' for all projects is the global one. The global location contains all common packages and local contains specific ones for the project.

However, I am not sure it is such a good idea to have a common local node_modules folder for different projects as you end up with having to make sure their dependencies dont clash because of difference in package versions. It would mean trying to maintain package.json for multilple projects.

In order to configure webpack to look at new location check github link here

The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative to the configuration file. If you have loaders installed from npm and your node_modules folder is not in a parent folder of all source files, webpack cannot find the loader. You need to add the node_modules folder as an absolute path to the resolveLoader.root option. (resolveLoader: { root: path.join(__dirname, "node_modules") })