Typescript 带子路径的库导入

Question

我有一个 Typescript 库，正在从 React 应用程序中使用。 我想用子路径导入 TS 库内容

import {base} from "my-lib"
import {foo} from "my-lib/path1"
import {bar} from "my-lib/path2"

我遇到了Github 问题，该问题指出 Typescript 尚不支持（在 package.json 中exports ）。我正在使用 Typescript 4.3。

在同一线程中发布了一个解决方法 - Github repo typescript -subpath-exports-workaround 。 它使用exports和typeVersions

{
  "main": "dist/index.js",
  "types": "dist-types/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./exported": "./dist/exported.js"
  },
  "typesVersions": {
    "*": {
      "exported": ["dist-types/exported"]
    }
  }
}

我创建了一个新的 React 应用程序（通过npx create-react-app命令）并尝试从typescript-subpath-exports-workaround导入hello ，它运行良好。 但无法导入`typescript-subpath-exports-workaround/exported

import {hello} from "typescript-subpath-exports-workaround" //works fine
import {foo} from "typescript-subpath-exports-workaround/exported" //gives "Module not found" error

完整错误如下：

./src/App.js
Module not found: Can't resolve 'typescript-subpath-exports-workaround/exported' in '/Users/...../my-react-app/src'

Codesandbox 代码 - https://codesandbox.io/s/create-react-app-forked-5yxd8

更新：导入中使用的子路径和文件夹结构不同。 在上面的示例中，不会有名为path1或path2的文件夹。

Answer 1

如如何在 TypeScript 中创建本地模块中所述：

使用module-alias包可能会解决您的问题。

将此配置添加到 package.json 中：

"_moduleAliases": {    "my-module":
"<your_build_folder>/modules/my-module" },

这个代码在第一行

你的主文件（server.ts/index.ts）

import 'module-alias/register' ；

Answer 2

查看Next.JS React 框架。 您可以看到它们使用的方法与您所描述的完全相同。 您可以使用他们的 CLI 工具创建一个简单的打字稿应用程序，如下所示：

npx create-next-app@latest --typescript

然后注意例如在./pages/index.tsx使用的./pages/index.tsx 。

然后，如果您查看./node_modules/next/package.json您会发现它们以两种方式公开构建的文件：实际代码和类型定义位于./node_modules/next/dist/*及其重新导出就在./node_modules/next/* 。

至少这是一个真实的例子，也是开始实验的好地方。 这并不意味着您必须学习他们的整个代码库。 您只需要模仿他们的package.json文件（ https://github.com/vercel/next.js/blob/canary/packages/next/package.json ）的基本部分，特别是main ， types和files中的打字稿库

Answer 3

我的package.json中的这个块对我有用：

{
    // ...
    "files": [
        "/dist"
    ],
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": "./dist/index.js",
        "./types": "./dist/types/index.js",
        "./generate": "./dist/generate/index.js"
    },
    "typesVersions": {
        "*": {
            "types": [
                "./dist/types/index.d.ts"
            ],
            "generate": [
                "./dist/generate/index.d.ts"
            ]
        }
    }
}

我的tsconfig.json看起来像这样：

{
    "extends": "@tsconfig/node14/tsconfig.json",
    "include": ["src/**/*"],
    "compilerOptions": {
        "lib": ["es2020", "dom"],
        "declaration": true,
        "outDir": "dist",
        "module": "ESNext"
    }
}

这是我的文件结构：

package.json
tsconfig.json
dist/ // and all its subfolders
src/
  generate/
    index.ts
  types/
    index.ts
  index.ts

另外，我正在使用 TypeScript 4.7.4。 据说这个版本支持exports字段，但它对我不起作用。 但是这个（可能过于复杂）解决方法对我有用。