相关疑难解决方法(0)

我一直在努力创建一个React组件的小型库,以便在其他几个项目中使用.我在内部发布包(使用私有GitHub存储库),然后包含在另一个项目中.但是,当我从包的子目录导入时,由于路径不匹配,我无法这样做.

使用该软件包的项目都利用webpack捆绑/转换代码,因为我试图避免在组件库中进行任何构建(如果可能).

目录结构

- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)

的package.json

...
"main": "./src/index.js",
"scripts": "",
...

SRC /按钮/ index.js

import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

SRC/index.js

如果只从子目录导入,这个文件真的是必要的吗？

import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };

其他项目

// This project is responsible for building/transpiling …

我目前正在尝试为 React 构建一个 UI 库，但遇到了一些麻烦。目前我正在使用打字稿和汇总，我能够捆绑单个组件index.js，并且能够导入这些组件，但它正在导入整个库。

现在：

文件结构：

src
--components
-----button
-------button.tsx
-------button.types.ts
-----input
-------input.tsx
-------input.types.ts
-----index.ts
rollup.js

我的汇总目标index.ts将所有内容导出为这样：

src
--components
-----button
-------button.tsx
-------button.types.ts
-----input
-------input.tsx
-------input.types.ts
-----index.ts
rollup.js

我可以像这样导入反应项目：

export { default as Button} from './button/button'
export { default as Input } from './input/input'

我想要做什么 我希望每个组件都单独捆绑，并且像这样导入

import { Button, Input } from 'my-library'

我尝试过的： 阅读文档后，似乎这就是preserveModule: true我正在寻找的内容，但后来我尝试按照上面的方式导入，但它开始抱怨没有找到任何东西。

我当前的 rollup.js 如下所示：

import { Input } from 'my-library/input'
import { Button } from 'my-library/button'

目前的行为

我们正在使用 tsdx 构建共享代码项目，我们只有一个疑问，担心我们无法得到答案。如何导出使用 TSDX 发布的包的子文件夹。

让我们用我之前的例子来回答这个问题。在我们项目的入口点，我们将这两个组件导出到根目录中。

因此，当您想使用它们时，我们必须从库的根目录导入组件（使用示例）：

import { Thing, SimpleStyledH1Application } from "tsdx-styled-components"

我们想知道如何配置我们的入口点，以便我们可以从子文件夹中导入我们的组件，例如

import { Thing } from "tsdx-styled-components/things"
import { SimpleStyledH1Application } from "tsdx-styled-components/styled"
import { CoreComponent } from "tsdx-styled-components"

预期行为/建议解决方案

关于如何将子文件夹添加到我们创建的库中的指南/注释，这样（不仅对我来说而且对使用 TSDX 的任何人来说）如何创建带有子文件夹的库都很容易。

额外的背景信息

• 我尝试按照此线程更改我们的汇总配置，但没有工作，并且不确定是否是完成它的正确/更简单的路径。
• 有一个用于此目的的汇总插件，因此类似的东西以及如何添加到我们的说明中tsdx.config.js会很棒。

您的环境

示例项目：

https://github.com/robertovg/tsdx-styled-components/ https://github.com/robertovg/next-ts-styled-components-tsdx-host

这个问题最初作为tsdx上的问题发布，但几个月后没有答案，我想将其移至此处，看看是否有人解决了该问题。