今天如何在 package.json 中为嵌套子模块和 typescript 使用“导出”

Question

最新更新 (2022-06-06)：TS 4.7 支持"exports"

tl;博士

// package.json
"type": "module"

// tsconfig.json
"module": "node12" // or "nodenext"

更新：TS 4.5 不支持"exports" （另见此问题）：

... 对 Node.js 12 的支持已推迟到未来版本，现在仅在夜间版本中作为实验标志提供。 这不是一个容易的决定，但我们的团队对生态系统的准备情况和如何/何时使用该功能的一般指导有共同的担忧。

[2022-04-01]该功能在 TS 4.6 中仍然不可用。

---

原始问题：

我想利用 NodeJS/package.json 的新“导出”功能，以便我可以执行以下操作：

"exports": {
  ".": "./dist/index.js",
  "./foo": "./dist/path/to/foo.js"
}

用户可以执行以下操作：

import { foo } from 'my-package/foo';

Typescript 4.5 应该支持“导出”字段，但它似乎不起作用。 我正在使用 TS 4.5.2 构建一个简单的 package，并且我正在使用 TS 4.5.2 的项目中使用 package。 我已经查看了其他SO 问题以及此 github 线程和此错误报告，但似乎无法就该问题以及它今天是否应该工作达成共识。

注意 1：我仍然可以使用更详细的语法进行导入：

 import { foo } from 'my-package/dist/path/to/foo.js';

注 2：我还尝试了用于导出的 object 表示法，但无济于事：

 "exports": { ".": { "require": "./dist/index.js", "import": "./dist/index.js" }, "./foo": { "require": "./dist/path/to/foo.js", "import": "./dist/path/to/foo.js" } }

问题）：

1. 此功能是否已准备好用于今天的 typescript 项目？ 如果没有，我只想知道。
2. 如果＃1是，我错过了什么？ 关于 tsconfig 的细节对于源项目和消费项目都很有用。 TS 编译器抱怨node12/nodenext被用于module或moduleResolution字段（我肯定使用 TS 4.5.2）。

Answer 1

我一直在寻找将嵌套文件夹用于我们在 Pipefy 创建的设计系统 package，经过深入研究，我找到了方法。

package 导出 React 组件，我们像这样导入它们import { Button } from '@mypackage/design-system;

稍后，我们在设计系统库中添加了标记，例如Colors 、 Spacing和Fonts ，但我们不想从索引中导入所有内容，因为它没有效率。

经过一番详尽的研究，我发现了如何使用 TypeScript 导出嵌套文件夹。 我的目的是使用这样的令牌import { Colors } from '@mypackage/design-system/tokens;

要像这样使用 TypeScript 库，您应该使用typesVersions文件中的package.json 。

在这里我是这样使用的

"typesVersions": {
    "*": {
      "index": [
        "lib/components/index.d.ts"
      ],
      "tokens": [
        "lib/tokens/index.d.ts"
      ]
    }
  },

它对我来说就像一个魅力，它也对你有用！

Answer 2

在不知道您遇到什么错误或以其他方式 TypeScript 似乎对您不起作用的情况下（不知道您为什么不想分享此类重要信息），我可以说您的exports部分似乎缺少类型信息。 通常，如果您的 .d.ts 文件位于它们各自的 .js 文件旁边，您的导出部分将如下所示：

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "default": "./dist/index.js"
  },
  "./foo": {
    "types": "./dist/path/to/foo.d.ts",
    "default": "./dist/path/to/foo.js"
  }
}