使用全局 node_modules 将 AngularJS 与 Webpack 捆绑在一起 [英] Bundling AngularJS with Webpack, using global node_modules

问题描述

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

What I want too archieve: Bundle angularjs application with webpack, but refer to node_modules folder located in a different location on the same filesystem.

• 对于这种情况，假设我的 Angular 应用程序的源代码是位于文件夹/source/code"中.
• 对于外部节点模块，位于/global/npm/App1/node_module"
• 应用名称:App1"

到目前为止我所做的:

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

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

How can I refer to the node modules located in /global/npm/App1/node_module? Do I have to use absolut path for each module I require in webpack.config.js?

推荐答案

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

I think the feature within Webpack you are looking for is the resolve-modules. This allows you to add additional folders that can be used without the need to add a path into them, almost acting like they are within the node_modules folder.

https://webpack.js.org/configuration/resolve/#resolve-模块

例如

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

resolve: {
        modules: [
            globalNpm
        ]
    }

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

I find the using path.join make your webpack code more likely to work across platforms (windows, mac, etc). The path in the above example may be wrong as I could really get your folder structure from your question. But the above should allow you require modules directly from your global npm folder.

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

Please the the above feature is mostly intended for large project and files that could be moved, or reused elsewhere, it stops the need to have

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

附带说明 - 全局安装 NPM 包仅在一个应用程序中使用不是正常模式，可能会导致问题，尤其是本地和 CI/CD 管道上的权限和版本控制.

On a side note - installing NPM packages globally to be used just within one app is not a normal pattern and can lead to problems, especially with permissions and versioning on local and CI/CD pipelines.

这篇关于使用全局 node_modules 将 AngularJS 与 Webpack 捆绑在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！