webpack 一个包含 node_modules 的模块答案

【问题标题】：webpack a module that contains node_moduleswebpack 一个包含 node_modules 的模块
【发布时间】：2018-07-07 01:28:53
【问题描述】：

问题

我想对开源 JavaScript 库进行更改。使用 webpack 和 npm 并将所有内容保持在本地，我必须对本地模块进行更改并将其导入到项目中以代替从注册表中下载的公共 npm 模块？本地模块和消费应用程序也将在两个单独的 git 存储库下进行源代码控制。

问题

我正在 Aurelia 应用程序中对此进行测试，但我认为这是 webpack 和 npm 的问题。我有一个名为 my-app 的应用程序，它依赖于 aurelia-binding。我希望对 aurelia-binding 进行本地更改并将它们推送到 GitHub 中的一个分支。我的项目结构如下：

└───my-app
    ├───.git
    ├───dist
    ├───node_modules
    │   └───aurelia-binding
    |       ├───.git
    │       ├───dist
    │       └───src
    └───src

构建并运行后，一切都按预期工作。要更改 aurelia-binding 并在 my-app 中测试它们，我需要安装它的依赖项并构建它。这导致了这样的结构：

└───my-app
    ├───dist
    ├───node_modules
    │   └───aurelia-binding
    |       ├───.git
    │       ├───dist
    |       ├───node_modules
    |       |   └───dependencies...
    │       └───src
    └───src

当 node_modules 安装在依赖项上时，webpack 在运行时抛出错误。该错误可能看起来像是 aurlia 模块的问题，但我不认为是这种情况。

Unhandled rejection Error: Error invoking SVGAnalyzer. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: __WEBPACK_IMPORTED_MODULE_1_aurelia_pal__.a.createElement is not a function

我也尝试过使用npm link 将库克隆到 my-app 旁边而不是 in 中，但得到了相同的结果。

【问题讨论】：

标签： npm webpack aurelia

【解决方案1】：

我在 webpack.config.js 中添加了以下内容，以便能够使用 npm/yarn 链接包。它强制 webpack 仅使用主 node_modules 解析模块，而不是“最近”的。

resolve: {
    extensions: [".ts", ".js"],
    symlinks: false,
    modules: ["ClientApp", path.resolve('node_modules')],
}

“ClientApp”是我的 aurelia 应用程序所在的文件夹。 symlinks 参数用于防止 webpack 将符号链接路径解析为绝对路径。

提醒一句，通过此设置，您可以规避 npm 的版本检查，因此您需要负责链接兼容版本。

【讨论】：

工作就像一个魅力。谢谢！