與 webpack 捆綁的 JS 可以解析為子模塊，但 ts/spfx 不能

Question

我有一個帶有幾個子模塊的本地庫，我在 dist 文件夾中動態添加了 package.json 來告訴我要使用“導出”公開哪些文件。

我不明白為什么 typescript 給我這個錯誤：

“minimal-module-webpack/omega”是“minimal-module-webpack”的子模塊，應該解析為 omega.js。 這是放置在 dist 文件夾中的 package.json：

{
  "main": "./index.js",
  "exports": {
    "./omega": "./omega.js",
    "./beta": "./beta.js",
    "./alpha": "./alpha.js"
  }
}

與 js 的 webpack 項目相同：

那么我可能在這里錯過了什么？ 為什么這適用於 js 但 ts 編譯器抱怨？ 即使我從 dist 中刪除 package.json 並使用指向 dist tsc 的 lib 根目錄中的導出仍然會抱怨。

Answer 1

經過廣泛的閱讀和試用，我使用了：

tsc --traceResolution

弄清楚 typescript 中的分辨率如何工作。 我意識到 SPFX 中使用的 typescript 版本與 package.json 的“導出”屬性無關。 此功能僅從 typescript 4.5 開始可用。

我通過在 types 文件夾中創建聲明並使用 afterEmit 掛鈎將它們移動到 dist 文件夾來解決。

const copyTypings = (root) => {
  glob.sync(root + '/**/*.d.ts').map(
    el => fs.copyFileSync(el, el.replace(root, './dist'))
  )
}
//---
//webpack.config.js
apply: (compiler) => {
          compiler.hooks.afterEmit.tap("stuff", (compilation) => {
           copyTypings('./types')
          });
        },

// output from tsc --traceResolution
======== Module name 'design/components/footer' was successfully resolved to 'C:/Code/Monorepo%20Sample%20App/design/dist/components/footer.d.ts'. ========