标签: tsdx

我的项目的设置是tsdx（基于Rollup和Typescript）。
在我的 IDE (vscode) 中工作一切看起来都很好，甚至运行也yarn tsc没有错误。

当我运行时yarn build（即tsdx build），我收到以下错误：

(typescript) Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.

错误中引用的代码是：

(typescript) …

目前的行为

我们正在使用 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上的问题发布，但几个月后没有答案，我想将其移至此处，看看是否有人解决了该问题。

我添加@storybook/preset-create-react-app到我的插件中，因为我希望故事书能够与 React/CRA 一起使用。基本上，我尝试以与 CRA 相同的方式导入 SVG。

import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';

SomeSvgStaticUrl- 默认情况下工作正常（返回字符串静态 URL，与 一起工作正常<img src={SomeSvgStaticUrl} />，但不是我想要的）

SomeSvgReactComponent-undefined默认情况下

因此，我决定更新 webpack 配置以添加 SVG 加载器，

import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';

就像故事书的魅力一样，但默认导入（SomeSvgStaticUrl在本例中），它返回 ReactComponent 而不是静态 URL。并且SomeSvgReactComponent是undefined。没问题，但是当主机应用程序使用具有默认 React/CRA 配置的包时，它不起作用。主机应用程序获取以下内容，

SomeSvgStaticUrl- 静态网址

SomeSvgReactComponent- 反应组件

如果我从包中删除 SVG 加载器，它在主机应用程序上可以正常工作，但在故事书上则不行。当我保留 SVG 加载器时，它可以与故事书一起正常工作，但不能与主机应用程序一起工作。

我真的不想强制所有主机应用程序通过其 webpack 配置使用相同的 SVG 加载器。有什么帮助可以帮助您做什么或者让故事书 SVG 加载器以与 React/CRA 加载器相同的方式工作的最佳方法是什么？

套餐详情

webpackFinal: async config …

我正在开发这个使用 的组件库tsdx，除了这个之外，所有组件都工作正常。它是一个使用@headlessui/react库的对话框，它是Dialog一个组件。它的导出是这样的：

DialogBase.Content = DialogContent;
DialogBase.Actions = DialogActions;
DialogBase.Description = DialogDescription;

export default DialogBase;

然后，在index.ts文件中，我必须导出所有组件才能公开它们，其导出如下：

export { default as DialogBase } from './DialogBase';

一切工作正常，但是当我尝试在不同的项目上使用该组件时，我收到此错误：

未捕获的类型错误：无法访问属性“Overlay”，u.Dialog 未定义

这很奇怪，因为该组件在其他 Nextjs 项目上运行良好，但在这个项目上却不行（这个是 CRA）。

这是我的tsconfig文件

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
    "module": "ESNext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noImplicitAny": false,
    "outDir": "./../src",
    "rootDir": "./",
    "sourceMap": true,
    "declaration": true,
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "noEmit": true, …

问题

我正在尝试在 npm 中发布我自己的 SDK。当我尝试安装软件包时，我的 dist 文件夹仅显示 index.js

代码：

这是我的package.json文件。它已经包含主文件和文件，https://docs.npmjs.com/cli/v8/using-npm/scripts。

{
  "version": "0.1.4",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "prepublish": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "name": "@grammable/sdk",
  "author": "peanut butter jelly",
  "homepage": …

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

我不明白的是，我应该"main"在package.json点的时候有没有一个合乎逻辑的单一出口/类/函数是有道理的包？

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

如果不应该，应该"main"指向什么，应该如何导出和导入东西？我会为像例如要能够import foobar from '@org/common/category/foobar，但是包是由故宫创建方式，似乎打包路径往往会落得包括dist或lib或类似的东西，我真的不想。

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

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