javascript - webpack 捆绑的 JS 可以解析为子模块，但 ts/spfx 不能

Question

我有一个带有几个子模块的本地库，我在 dist 文件夹中动态添加了一个 package.json 来告诉我要使用“导出”公开哪些文件。

我无法弄清楚为什么打字稿会给我这个错误：

“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

弄清楚分辨率如何在打字稿中工作。我意识到 SPFX 中使用的 typescript 版本与 package.json 中的“exports”属性没有任何关系。此功能仅从 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'. ========