多个项目之间共享 node_modules 目录

Question

我是一名Java开发人员，正在学习EC6。我使用npm下载JavaScript包，并使用webpack创建最终的bundle.js文件。

我有一个很好的项目文件夹，其中包含Java模块和Java文件，我想向我的web模块添加EC6 JavaScript文件。我使用Maven管理Java jar依赖库。

这是我的文件夹结构：

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>

当我在my-project/web-module-1/src/main/webapp文件夹中执行npm install...命令时，npm会在webapp目录下创建一个名为node_modules的新目录。该文件夹包含大量文件。

我的问题是，当我在第二个Web项目上工作并执行相同的npm install...命令时，将在my-project/web-module-2/src/main/webapp目录下创建一个带有相同内容的第二个node_modules目录。

我可以使用公共的、分离的node_modules目录来避免重复的文件并节省磁盘空间吗？ 我可以将js依赖项存储在例如/home/user/javascript/modules文件夹下吗？

评论1：我不想以root身份执行npm并使用npm -g install！

评论2：我也不想创建符号链接。

你能帮我吗？

---

编辑： 我做了什么：

• 我为JS包创建了一个新文件夹：/home/user/javascript-modules。
• 将package.json文件复制到/home/user/javascript-modules。
• npm install --prefix /home/user/javascript-modules

之后，必要的JS模块被复制到我的javascript-modules/node-modules目录中。很好！

但是当我尝试执行webpack时，我会得到一个缺少模块错误：

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

结果：

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

评论：我的webpack.config.js文件包含以下内容：loader:“babel-loader”。

有没有办法为webpack指定“classpath”？也就是说，告诉webpack模块在哪里。

---

更新 正如您在评论中所看到的，我已经尝试了许多不同的方法来解决我的问题，但都没有成功。对我来说，似乎webpack不支持我想要做的事情。太可悲了:(

就是这样。如果有人有任何有效的、好的、完整的解决方案，请与我们分享。谢谢。

- zappee

---

更新了答案，希望能解决你的问题。 - Suraj Rao

我想要实现完全相同的事情。最终我转向了pnpm。虽然它使用符号链接和硬链接来避免磁盘上的重复，但似乎工作得非常好。 - sceid

可能是重复的问题：如何使多个项目共享node_modules目录？。另外，您是指ES6吗？ - Dan Dascalescu

Answer 1

请使用pnpm代替npm。

来自pnpm项目的网站:

pnpm使用硬链接和符号链接，只在磁盘上保存一个模块的版本。例如，如果您有100个项目都使用同一个版本的lodash，使用npm或Yarn时，将在磁盘上有100个lodash的副本。而使用pnpm，则只会在磁盘上的一个位置上保存lodash，并且一个硬链接将其放置到应安装到的node_modules目录中。

1. 在命令行窗口中使用npm安装，请使用：

    npm install -g pnpm
   

2. 要更新现有的软件包安装（以及所有子目录），请使用：

 pnpm install --recursive

或者，使用递归安装的快捷命令：

    pnpm i -r

您可以在任何通常使用npm的地方使用pnpm。（当pnpm不支持时，此命令会安全地回退到npm函数。）

- Benson

---

很高兴看到更多人意识到 pnpm。你也可以指出这个问题可能是你在 另一个问题 上留下相同答案的重复问题。我现在就去做。 - Dan Dascalescu

太棒了，谢谢！我觉得现在是时候学习如何将问题标记为重复了。 - Benson

Answer 2

为了让npm安装在自定义目录中，您需要运行以下命令：

npm install -g --prefix=/custom/directory npm

npm install --prefix path_to_node_modules_location

编辑：没有package.json文件的本地文件夹不可能存在。

唯一的“通用位置”是全局位置。 全局位置包含所有公共软件包，而本地位置包含特定于项目的软件包。

然而，我不确定为不同项目拥有一个常见的本地node_modules文件夹是否是一个好主意，因为你最终会因为包版本的差异而必须确保它们的依赖关系不会冲突。 这意味着要尝试维护多个项目的package.json文件。

为了配置webpack查看新位置，请查看此处的github链接。

这里的加载器是相对于应用它们的资源解析的。这意味着它们不是相对于配置文件解析的。如果您从npm安装了加载器，并且您的node_modules文件夹不在所有源文件的父文件夹中，webpack将无法找到该加载器。您需要将node_modules文件夹作为绝对路径添加到resolveLoader.root选项中。(resolveLoader: { root: path.join(__dirname, "node_modules") })

- Suraj Rao

---

我正在尝试执行my-project/web-module-1/src/main/webapp/webapp/npm install --prefix /home/user/javascript/packages。结果：npm WARN enoent ENOENT：没有此文件或目录，打开/home/user/javascript/packages/package.json'。 - zappee

这意味着我需要将 package.json 文件复制到单独的 node_modules 文件夹中吗？奇怪。Maven 的概念看起来更好... - zappee

好的，你能放上webpack.config.js吗？那里是你设置它的配置的地方。你需要让构建过程检查你的新位置。 - Suraj Rao

正如我在答案中所述，您必须将变量SRC设置为绝对路径，而不是相对路径。 - Suraj Rao

这真的让我疯了。为什么它这么复杂？与Maven相比，Webpack就是这么复杂。我在我的原始webpack.config.js文件上进行了很多更改，但它仍然无法正常工作。我设置了你建议的排除项，看起来很好。我将es2015更改为babel-preset-es2015，stage-0更改为babel-preset-stage-0，react更改为babel-preset-react，但现在我收到了不同的错误：无法解析模块“react”。我想这来自于我的*.js文件，例如：App.js > import React from 'react'。我的当前配置文件：https://gist.github.com/zappee/387f9f50ad6cd430bbb0ee386eef110e。 - zappee