在我们的私有节点依赖项中使用绝对路径？

Posted 2023-02-16

【中文标题】在我们的私有节点依赖项中使用绝对路径？

【英文标题】：Using absolute path in our private Node dependencies?

【发布时间】：2022-01-04 01:37:26

【问题描述】：

我已将代码库的 React 组件拆分为私有依赖项，以便不同项目可以使用这些组件。这些组件都使用 Webpack 别名来使代码更具可读性：

import TestComponent from 'components/TestComponent';

而不是：

import TestComponent from '../../components/TestComponent';

现在组件已经通过 Webpack 别名设置从项目中删除，所以别名自然停止工作。

我正在构建并尝试导入这些组件的新项目如下完成：

Wrapper project, a Vite development project importing the components library.
>> Components imported as a dependency named 'core'
>>> All of the included React components are using the absolute paths.

我真的很想知道是否有办法在依赖项本身中为导入别名。问题是我的文件/views/TestView 正在尝试导入/components/shared/Button，并且只有在以下情况下才有效我使用相对路径：

/views/TestView.jsx

import Button from '../components/shared/Button'

因此，除非我对数百个组件进行大规模重构以将绝对路径更改为相对路径，否则有没有办法在依赖项中为路径起别名？

一种可能的解决方案（尚未尝试）可能是将组件进一步拆分为特定的类别依赖项，例如：

core

- 包含以下所有依赖项的 package.json

@core/views

@core/components

任何关于如何实现这一点的帮助或想法（如果可能的话）将不胜感激。任何可以避免大规模重构和必须在每个文件中使用相对路径的麻烦的方法。

【问题讨论】：

npm 链接？ medium.com/dailyjs/how-to-use-npm-link-7375b6219557

我已经链接了组件库，但困难在于我试图避免在同一个依赖项中使用相对路径调用同一个 dep 中的其他文件

如果你使用 npm link 那么你不需要相对路径。只需像任何其他 npm 包一样添加包

我正在尝试仅调用一个依赖项中的文件（node_modules/myModule/views/View.jsx 正在尝试调用 node_modules/myModule/components/Button.jsx）

你是如何编译组件库的？

【参考方案1】：

为了解决这个问题，我选择了一个核心模块，其中包含所有单独的文件夹作为依赖项。这意味着我可以这样调用代码：

import Component from 'components/button'

现在已更改为使用核心模块中的依赖项，如下所示：

import Component from '@core/components/button'