问题标签 [tsdx]

所以我对捆绑大小性能改进有点陌生，我想做的事情是降低我用TSDX编写的组件库的导入成本。它是一个基于 rollup.js 创建 Typescript 库的工具。我正在使用开箱即用的设置。

当我调查我的应用程序时，我发现从我的组件库中导入组件的成本似乎很高。见图片：

似乎当我导入单个组件（或函数）时，还会导入很多其他的东西。有没有人知道这是否正常和/或我是否可以改善这一点？也许有人知道我如何导入它，就像他们如何使用 lodash 包一样，您可以从特定文件夹导入单个 util，如下所示：import { add } from 'lodash/add'？

长话短说：如何降低 TSDX（基于 rollup.js）库的导入成本？提前致谢！

我编写了一个 TSDX 包，我想在我的 React 应用程序（使用Create React App）的浏览器中使用它，也可以在一个使用JavascriptCore的 Swift iOS 应用程序中使用它。

在 React 应用程序中一切正常，但我无法创建一个适用于JavascriptCore的包。在这种情况下，全局变量喜欢window并且document不存在。

目前我遵循这个过程：

• 使用默认设置创建 TSDX 构建（例如$ tsdx build）
• 使用 webpack 将 TSDX 输出捆绑到包含依赖项的浏览器友好包中（我觉得 TSDX 应该能够做到这一点，但我无法让它工作）

问题似乎是底层依赖@azure/storage-blob项（例如document.

感觉就像我需要以某种方式创建一个混合，它认为它在 Node 上下文中运行（没有全局变量）但不尝试使用诸如require导入依赖项之类的东西。

我怎样才能做到这一点？（或者还有其他方法吗？）

可以为每个用例创建单独的包。

• 我使用 TSDX create 创建了一个包。
• 我需要使用 .css 文件
• 我遵循了https://tsdx.io/customization#rollup的指南

我启动了一个组件库，基于tsdx --template react-with-storybook，添加chakra-ui/react为依赖项，然后在其中创建组件。

这些组件使用来自 Chakra 的默认主题的颜色 - 特别是blue.700.

在 Storybook 中，我将组件包装在 中<ChakraProvider>，并且它可以工作。我构建了库并将其放在 npm 中。

现在在我的应用程序（基于create-react-app）中，我安装了库，导入并应用了<ChakraProvider>，使用了组件——它可以工作，除了样式。

在 HTML 源代码中，我可以看到颜色仍然是 string "blue.700"，因此没有使用主题将其转换为颜色。

这个脉轮 UI 位：

变成生成的 div 具有的这个 CSS 类：

ChakraProvider 显然做了一些事情，例如页面中添加了许多 CSS 变量，包括--chakra-colors-blue-700.

我想也许我的应用程序中使用的 ChakraProvider（来自它自己的@chakra-ui/react依赖项）使用了与库中不同的 React 上下文，所以我决定在库中添加一个导出（export { ChakraProvider } from '@chakra-ui/react';），现在我从我的库中导入它应用程序; 但这没有效果。

会发生什么？有谁知道如何调试这个？

使用tsdx构建 TypeScript 并使用NUglify进行缩小后，我开始收到错误消息。Strict-mode does not allow assignment to undefined variables: regeneratorRuntime

如何修复此错误而不必忽略它？

我们正在制作一个 npm react 包（通过 tsdx 库），它是一个自定义钩子。安装此包的开发人员需要在根目录下创建一个config.json文件，并在其 Next.js 项目的公共文件夹中创建一个Languages.json文件。我们需要访问开发人员编写的这些文件中的信息。

打包文件：

LanguageProvider.tsx：存储当前语言环境状态的反应上下文。

UseTranslation.tsx：一个自定义钩子，它从上下文中获取语言环境并从 Languages.json 中的当前语言环境中找到键。

包.json

安装此包的 Next.js 项目：

公共/Languages.json

页面/index.js

当我运行该项目时，它会在浏览器控制台中显示此警告：

并且来自t函数的文本不会在页面上呈现。

我们正在制作一个 npm react 包（通过 tsdx 库），这是一个用于多语言反应项目的自定义钩子。安装此包的开发人员需要在根目录下创建一个config.json文件，并在其 Next.js 项目的公共文件夹中创建一个Languages.json文件。我们需要的是我们可以在应用程序的客户端读取Languages.json 。

包文件： LanguageProvider.tsx：存储当前语言环境状态的反应上下文。

UseTranslation.tsx：一个自定义钩子，它从上下文中获取语言环境并从 Languages.json 中的同一语言环境中找到键。

当我从UseTranslation.tsx记录Languages.json文件时，它会显示服务器上的数据，但它在应用程序的客户端未定义。

我正在使用 TSDX react-with-storybook 模板创建一个 React 组件库。但是，我似乎无法通过导入让 CSS 在我的组件中工作。

这是我的按钮组件：

这是我的CSS：

在浏览器中查看我的按钮故事时，该按钮没有样式并显示“无效的属性值”：

将 css 应用于基于反应的库方面的最佳实践是什么？

这是我的 package.json：

我的场景

我正在使用具有 MUI v5 对等依赖项的TSDX （react-storyook 模板）创建一个 TypeScript 包。

在包中，我正在扩充主题以对其进行自定义，如MUI所述。

然后我通过使用纯 JavaScript 的 create-react-app (CRA) 来使用这个包。

问题陈述

当对等依赖项作为开发依赖项安装时，我的模块扩充仅对包可见。

模块扩充不适用于包本身之外的对等依赖项（即，虽然它是依赖于两者的项目内部的对等依赖项）。

如何让我的 CRA 项目共享并理解主题界面模块增强功能？

我正在尝试创建一个可以导出 N 个（比如说 5 个）组件的反应库。我正在使用 css-modules 来设置所有组件的样式。

我的目标是： 如果这个库的消费者只想使用 5 个组件中的 1 个组件，则不应将其他 4 个组件的 CSS 添加到消费者的包中。

我试过什么？：我开始使用 create-react-library，但它会创建一个 CSS 文件并将所有组件的样式添加到一个用户可以导入的文件中。我也尝试过 tsdx，但它也会为所有奇怪的组件生成单个 css 文件。

我的问题是：使 CSS 在用户包中摇晃的正确方法是什么？是否可以在不让用户导入 CSS 文件和不使用 CSS-in-JS 的情况下自动注入使用的样式（在这种情况下，只有一个组件的样式）？