node.js - 使用全局 node_modules 将 AngularJS 与 Webpack 捆绑在一起

Question

我也想要归档:将 angularjs 应用程序与 webpack 捆绑在一起，但引用位于同一文件系统上不同位置的 node_modules 文件夹。

<小时/>

• 对于这种情况，假设我的角度应用程序的源代码是 位于文件夹“/source/code”中。
• 对于外部 Node 模块， 位于“/global/npm/App1/node_module”
• 应用程序名称:“App1”

<小时/>

到目前为止我做了什么:

1. 使用“npm install -g”安装了角度应用程序 App1，因此 Node 模块将位于 App1 内的全局 npm 文件夹/global/npm/App1
2. 然后我尝试从/source/code 捆绑 App1。这不起作用，因为我缺少位于/global/npm/App1/node_module 中的 Node 模块。

如何引用位于/global/npm/App1/node_module 中的 Node 模块？ 我是否必须在 webpack.config.js 中使用我需要的每个模块的绝对路径？

Answer 1

我认为您正在寻找的 Webpack 中的功能是 resolve-modules。这允许您添加可以使用的其他文件夹，而无需向其中添加路径，几乎就像它们位于 node_modules 文件夹中一样。

https://webpack.js.org/configuration/resolve/#resolve-modules

例如

const globalNpm = path.join(__dirname, 'global', 'npm', 'App1', 'node_module'),

resolve: {
        modules: [
            globalNpm
        ]
    }

我发现使用 path.join 使你的 webpack 代码更有可能跨平台(windows、mac 等)工作。上面示例中的路径可能是错误的，因为我确实可以从您的问题中获取您的文件夹结构。但上面应该允许您直接从全局 npm 文件夹中获取模块。

请注意，上述功能主要用于大型项目和可以移动或在其他地方重用的文件，它不再需要

const module = require('../../../a-folder/../../fancycomponent')

顺便说一句 - 全局安装 NPM 包以便仅在一个应用程序中使用并不是一种正常模式，并且可能会导致问题，特别是在本地和 CI/CD 管道上的权限和版本控制方面。