理解Angular 2 webpack项目中的源代码符号链接

Understanding source code symlink in a Angular 2 webpack project

本文关键字：源代码 符号链接 项目 Angular webpack 理解      更新时间：2023-09-26

我有两个Angular2项目，使用webpack作为模块bundler和typescript。

为了在两者之间共享代码，我拆分了一些源代码，并创建了一个指向这两个项目中每个项目的"外部"源代码的符号链接。

执行此操作后，"符号链接代码"无法正确解析导入。

下面的一个"你好世界"项目显示了我的担忧。

https://github.com/datracka/angular2-symlink-issue

该项目直接运行，但如果您删除给定的src文件夹，并创建一个指向另一个src文件夹的符号链接，该文件夹具有位于/another/path/src的相同源代码BUT，则会出现编译器错误：

ERROR in .-shared/src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.dirname (path.js:1326:5)
    at ensureTypeScriptInstance (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:156:103)
    at Object.loader (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:403:14)

所以我的问题是：当我将源代码"分发"到项目文件夹之外的另一个文件夹中时，符号链接缺少什么？

我的猜测是关于在webpack中正确配置解析对象https://webpack.github.io/docs/resolving.html覆盖node.js加载nodemodule算法https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders但不是运气。

希望有人能给我指明方向。

我找到了答案。

我的猜测是对的。它是关于nodejs如何解析依赖关系的。https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders

符号链接的代码试图找到一直向上移动的依赖项，直到找到node_module为止都失败了。但是什么都没有。node_module在父项目中。

因此，解决方案是从符号链接的代码到父项目的node_modules文件夹创建另一个符号链接，以解决依赖关系。

我有一个类似的设置，但决定在我的主应用程序中添加一个到tsconfig.json的路径：

"paths": {
   "*": ["*", "node_modules/*"]
}

共享符号链接文件夹中源代码所需的所有模块都在主应用程序的node_modules文件夹中。这个命令告诉编译器在尝试查找树上的node_modules文件夹之前，先查看主应用程序的node_mdules文件夹。

相关文章：