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

【问题标题】：JS bundled with webpack can resolve to submodules but ts/spfx cannotwebpack 捆绑的 JS 可以解析为子模块，但 ts/spfx 不能
【发布时间】：2022-01-16 01:06:16
【问题描述】：

我有一个带有几个子模块的本地库，我在 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 根目录中的导出仍然会抱怨。

【问题讨论】：

标签： javascript typescript webpack spfx spfx-extension

【解决方案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'. ========

【讨论】：