如何直接导入组件而不是从根索引文件导入？答案

【问题标题】：How can I import a component directly instead of from the root index file?如何直接导入组件而不是从根索引文件导入？
【发布时间】：2022-12-29 14:59:13
【问题描述】：

我给自己写了一个小包，用于在我的项目之间共享不同的 React 组件。

我的 package.json 中的“导出”字段如下所示：由于这是一个 TypeScript 项目，下面指定了输出目录中转译后的 .js。

"exports": {
    ".": "./lib/index.js"
  }

我的 index.ts 文件如下所示：

export * from "./Grids";

然后在我的 Grids 文件夹中，我有另一个包含以下内容的 index.ts 文件：

export * from "./UniversalGrid";

最后在 UniversalGrid 文件夹中，还有另一个 index.ts 文件，其中导出了实际的组件：

export * from "./UniversalGrid";

现在，当我想在我的应用程序中使用该组件时，会显示两个导入建议，即：

import {UniversalGrid} from "@privateComponents/react-components"

和

import {UniversalGrid} from "@privateComponents/react-components/lib/Grids/UniversalGrid"

第一种方法（从 /react-components 导入）没有问题。

但是，使用第二个可能的导入语句（从 /react-components/lib/Grids/UniversalGrid 导入）会发生以下情况：

Module not found: Error: Package path ./lib/Grids/UniversalGrid is not exported from package C:\Users\<user>\WebstormProjects\PKD\node_modules\@privateComponents\react-components

但是，通过这种方式可以毫无问题地导入组件，而且当我选择“跳转到定义”时，我会被引导到正确的文件。

现在我有两个问题，第一，为什么会这样？

其次，如何单独导入/导出我的组件。

说：Grid1 应该从 /Grids/Grid1 导入。

网格 2 应从 /Grids/Grid2 导入。

但是不应直接从 /Grids 文件夹中导入任何模块。

非常感谢您！

【问题讨论】：

标签： node.js reactjs node-modules

【解决方案1】：

只是不要在 Grids/index.ts 中导出 Grid，将您的转译更改为此

  "exports": {
    ".": "./lib/index.js",
    "./Grids/Grid1": "./lib/Grids/Grid1/index.js",
    "./Grids/Grid2": "./lib/Grids/Grid2/index.js"
    ...
  },

现在您可以从 /Grids/Grid1 而不是 /Grids 导入 Grid1

【讨论】：