问题标签 [tsdx]

我需要为我们公司各种前端项目使用的一些常用功能制作一个 NPM 包，但非常不确定如何正确执行。我们正在使用 Typescript，而tsdx似乎可以处理一些我非常不确定如何正确执行的事情，但它并没有说明如何构建“实用程序”类型的包。

我不明白的是，当一个包中没有一个合乎逻辑的单一导出/类/函数时，应该"main"指出package.json什么？

它应该只导出整个包中的每一个“公共”函数吗？如果是这样，这将如何影响摇树（我目前不太了解）和类似的事情？

如果不应该，应该"main"指向什么，应该如何导出和导入东西？例如，我希望能够import foobar from '@org/common/category/foobar，但是 npm 创建包的方式，似乎打包的路径通常最终会包含distorlib或类似的东西，我真的不想要。

应该如何构建一个“多功能 NPM 包”来获得干净的导入和工作的 tree-shaking 和其他好东西？

有没有人在 GitHub 或其他可用的地方有任何好的、干净、简单的库示例？我曾尝试查看像 lodash 这样的项目，但它们通常不是用 Typescript 编写的，而且通常似乎有相当复杂的设置，包括 mono-repos、工作区、自定义构建脚本等......

我有一个Monorepo，它是使用yarn 工作区创建并与TSDX捆绑在一起的。

注意： TSDX 是 Typescript + Rollup

我的 Monorepo 在包中有 2 个文件夹，

• 应用程序（私有） - 这是一个 CRA - 创建反应应用程序应用程序，这个应用程序正在消耗组件包
• 组件 - 这是一个使用 TSDX 进行捆绑的包

组件包有3个组件导出

• 日志一
• 日志二
• FilePreviewer 注意： FilePreviewer 组件使用的是外部包（react-pdf）

从组件包导出的文件具有以下代码

我只在App中导入 logTwo() ，

预期行为App 应该只有 logTwo，

实际行为logTwo 并且它正在导入 FilePreviewer 依赖包（react-pdf）

我创建了一个公共 Github 存储库来复制上述场景， 单击此处获取 Github 存储库链接

要遵循的步骤

• 克隆存储库
• 纱线安装
• yarn build -构建组件包
• yarn start -启动 App 包
• 纱线分析 -分析构建并显示捆绑大小

我想创建一个新的 TSDX 项目。根据 TSDX快速入门文档，我输入

我选择basic，我得到以下输出：

任何想法？

提前致谢！

• 节点版本：v14.9.0
• 纱线版本：1.22.5
• npx 版本：6.13.0
• zsh 5.7.1 (x86_64-apple-darwin19.0)
• macOS 10.15.6 (19G73)

我使用TSdx为小型Jest记者创建了一个 npm 包。如果我在另一个项目中使用该包，我会收到以下错误。

ExampleReporter继承自BaseReporterJest 提供的类。

如Class constructor cannot be invoked without 'new'中提到的，它可以通过设置 Babel 来修复。但是我无法通过 TSdx 文档找到可行的解决方案。

如何配置 TSdx build？

您可以使用手表模式重现该问题。

我准备的 JS 包（使用 tsdx）正在多个公司系统中使用。它位于我们的 gitlab 中，因此 package.json 条目如下所示：

现在，每次用户执行此操作时，npm install都需要花费大量时间才能完成该过程。是因为我推送 src/ 文件夹而不是 dist/ （我这样做）？包每次被下载时都会自行构建npm install吗？我应该推送 dist/ 文件夹以缩短完成所需的时间npm install吗？

我正在创建一个小的 React 组件库。为此，我正在使用tsdx。不幸的是，构建失败（tsdx build）已经失败，并出现了一个非常基本的错误。

对我来说，当我在 Storybook 中使用它时，语法看起来不错，并且相同的代码也可以工作。

未修改版本的 tsdx 会出现错误0.14.0。发生错误的整个文件如下所示：

我也尝试使用 配置 Babel，preset-react但它并没有改变任何东西。有人知道这里发生了什么或如何获得更多解释性错误消息吗？

我正在使用TSDX创建一个带有故事书的图书馆。

我的问题是当我运行故事书时：

npm run start-storybook -p 6006

显示下一个错误：

• ./src/sidenav/functions/index.tsx 中的错误找不到模块：错误：无法解析“../../../constants/global-constants”

• ./src/alarmbar/styles/alarmbar.scss 中的错误 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件文件。见https://webpack.js.org/concepts#loaders

似乎无法加载 tsx 和 sass 文件。

在 scss 文件中，我使用它在每个组件上使用暗模式和亮模式。

因此，如果主题是深色或浅色，每个组件都会发生变化：

知道如何解决吗？

解决方案：

1. 更新“@storybook/react”：“^6.1.11”

2. 添加“@storybook/preset-create-react-app”：“^3.1.5”

3. 在 .storybook 内的 main.js 上添加：

   };

一直在尝试学习如何创建/分发一个 npm 包，并且我已经编写了我的第一个使用 ResizeObserver API 的库，目前该 API 拥有大约 89.6% 的全球支持。

我想捆绑一个文件，其中也包含resize-observer-polyfill库的一部分，因此有人可以将其导入为 import <library-name> from "<library-name>/polyfilled";

我已经使用TSDX来生成项目，目前只是发送 index.ts 文件以及 index.d.ts 类型文件。在 index.ts 文件中，有一个在内部使用调整大小观察器的函数。

我不确定如何创建设置来处理这个问题，如果它可以纯粹通过更改配置来包含它（TSDX 使用汇总）或者我需要做其他事情，比如动态导入模块，但是不确定这在捆绑包大小方面如何工作，以及是否会添加到整个库大小中。

处理向库添加 polyfill 的最佳方法是什么。或者如果需要，我应该只指向消费者添加的polyfill？

我有以下问题，并且确切地知道它被触发的原因，但我还没有找到任何解决方案，所以社区可能会帮助我解决这个问题。

我tsdx用于启动 ts repos，也ts-node用于快速调试（而不是每次都构建代码）。

递归困境：

因此，每次当我想将模块添加到我的包时yarn add modulename，如果在我的tsconfig.json文件中compilerOptions选项："module": "commonjs"具有以下值，tsdx build无法构建代码，并返回以下错误：

错误：不兼容的 tsconfig 选项。模块解析为“CommonJS”。这与汇总不兼容，请使用 'module: "ES2015"' 或 'module: "ESNext"'

但！

如果我将更新compilerOptions到module: "ESNext"from commonjs，ts-node会给我一个错误，因为它仍然无法使用import {Method} from Module而不是const x = require(CommonJS)（根据这个问题和这个问题，这是一个相当老的错误）

• 打字稿-v 4.1.5（最新）
• ts 节点：“^9.1.1”
• 节点-v：15+

据我所知，我正在使用 WebStorm 和README.mdts-node repo，我可以Environment Variables使用自定义 tsconfig 进行更新。因此，在这种情况下，我需要 repo 中的两个 tsconfig 文件，用于 ts-node 和用于 production。所以问题是：也许还有另一个 TS_NODE_FLAG，尤其是对于module编译器选项？所以我可以用标志运行 ts-node ，这会覆盖这个小参数吗？

当前行为

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

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

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

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

预期行为/建议的解决方案

要获得有关如何将子文件夹添加到我们创建的库的指南/注释，因此很容易（不仅对我，而且对使用 TSDX 的任何人）如何创建带有子文件夹的库。

附加上下文

• 我试图在这个线程之后更改我们的汇总配置，但没有工作，并且不确定是否是正确/更容易完成它的路径。
• 有一个用于此目的的汇总插件，因此带有有关如何添加到我们的说明的类似内容tsdx.config.js会很棒。

你的环境

示例项目：

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

这个问题最初是作为一个问题发布在tsdx上的，但是几个月后没有答案，我想把它移到这里看看是否有人解决了这个问题。