導入子文件夾在 typescript npm package

Question

我正在為npm創建一個 package，但我希望通過以下方式導入它：

import myPackage from 'my-package';
import { subFunction1, subFunction2 } from 'my-package/subfunctions';

當嘗試使用我創建的 package 時，它會正確加載根文件，但會為子文件夾產生以下錯誤：

找不到模塊“我的包/子功能”

我當前發布到 npm 的文件夾結構是：

index.js
index.d.ts
subfunctions/
  sub-function-1.js
  sub-function-1.d.ts
  sub-function-2.js
  sub-function-2.d.ts
  index.js
  index.d.ts

我在package.json文件上的類型聲明如下：

"types": [
  "./dist/index.d.ts",
  "./dist/subfunctions/index.d.ts",
],

下面我展示了文件index.d.ts (1) 和subfunctions/index.d.ts (2) 的內容：

(1)

import myCode from './lib/my-code';
export default myCode;

(2)

export { subFunction1 } from './sub-function-1';
export { subFunction2 } from './sub-function-2';

如何從此子文件夾導入？

Answer 1

我知道這是一個非常古老的問題，但我想我會分享這個答案。 看起來package.json中有一個更新的字段， "exports" （自 Node.js 12+，~2019 起支持），它作為"main"的替代品提供，可能正是您（以及任何其他有同樣問題的人）的意思尋找。

雖然我自己還沒有測試過，但"exports"支持“subpath exports” ，它允許您從與主路徑不同的路徑導出子模塊代碼：

{
  "main": "./index.js",
  "exports": {
    ".": "./index.js",
    "./subFunctions": "./src/subFunctions/index.js"
  }
}

在導入端，這將導致您正在尋找的內容：

import myPackage from "my-package";
import subFunctions from "my-package/subFunctions";

或者大概（這是文檔不清楚的部分，所以我不是 100% 確定，但這是有道理的）：

import myPackage from "my-package";
import { subFunction1, subFunction2 } from "my-package/subFunctions";

...假設src/subFunctions/index.js具有匹配的命名導出。

抱歉，如果其中任何一個具有誤導性，因為我只是從文檔中得到這個（幾天后我偶然發現了這個問題，就像隨機偶然發現這個問題一樣），但如果它有效，希望這對某人有所幫助。