NPM。从包中导入文件的路径

Question

是否可以自定义从包中导入文件的路径？

我有一个包，这是我们内部项目的 UI 工具包。现在使用 WebPack 构建后我有以下项目结构：

- dist
  - components
  - index.d.ts
  - index.js

在通过 webpack 构建之前

index.ts

看起来像这样：

import { Button } from './components/Button';
...
import { Input } from './components/Input';

export { Button, ..., Input };

现在如果我像这样导入组件：

import { Button } from '@package/name';

一切顺利，我得到了想要的结果。但是，为了方便起见，我想稍微改变一下路径。

有没有办法让我可以从特定路径获取组件？让我们这样说：

import { Button } from '@package/name/base';
import { AccountIcon } from '@package/name/icons';

如果我只是更改 dist 文件夹的结构，它将让我能够获取组件，但路径将如下所示（这是一个工作选项）：

import { AccountIcon } from '@package/name/dist/icons';

是否可以摆脱路径中的“dist”？最好的方法是什么？也许有一些材料可以阅读？没找到任何相关内容。

我尝试更改

package.json

，在

dist

文件夹内创建一个结构，稍微更改了webpack配置，但这更像是尝试寻找解决方法，我没有得到想要的结果。

Answer 1

您可以使用 package.json 中的

export

字段来执行此操作。例如：

"exports": {
  "./base": "./dist/index.js",
  "./icons": "./dist/icons.js"
}

不要忘记必填的

"./"

。

（注意：这是基于其他人的答案，但现已删除，因为它是由 ChatGPT 生成的。我将其要点放回此处，因为答案实际上很有用）

Answer 2

对于尚未找到此问题答案的人，请检查此答案：https://stackoverflow.com/a/70020984/13381872