javascript - 如何使用 webpack 生成 d.ts 和 d.ts.map 文件？

Question

我找不到使用 webpack 生成 d.ts 和 d.ts.map 文件的方法。 babel-loader 只生成 js 和 js.map 文件。我还需要 d.ts 和 d.ts.map 文件(我可以使用 tsc 命令生成)，如下图所示:

这是一个包含所有设置的最小存储库:https://github.com/stavalfi/lerna-yarn-workspaces-example

更多详情

我搬到了 Lerna + yarn。我的一个包是用 TS 和 JS 编写的 core(将在其他包中使用)。

我正在为 ts-to-js 使用 webpack 4，babel-loader 8。

其他包试图找到我的 core 包的类型定义和实现，但我只能生成 index.js 和 index.js。使用 webpack 映射:

output: {
    path: distPath,
    filename: 'index.js',
  },
{
  "extends": "../tsconfig.settings.json",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "declarationDir": "dist",
    "rootDir": "src",
    "outDir": "dist"
  }
}

• 当我使用 tsc(没有 webpack)编译时，一切正常，如上图所示。

我的策略错了吗？我该怎么办？

---

我已经尝试了很多生成 d.ts 文件的插件，但它们不起作用并且不会创建 d.ts.map 文件。

我已经尝试过:typescript-declaration-webpack-plugin、npm-dts-webpack-plugin、dts-bundle-webpack、 @ahrakio/witty-webpack-declaration-files。 (它们列在 core 的 package.json 中，因此您可以克隆并使用它)。

Answer 1

在 babel-loader 之前运行 ts-loader 就可以了。

您只需要在配置中指定您想要的声明文件即可。

---

如果您使用绝对路径，输出的 d.ts 文件也将包含无用的绝对路径，并会导致 typescript 编译错误。

为了解决这个问题，我写了一个插件来将绝对路径转换为相对路径: https://github.com/stavalfi/babel-plugin-module-resolver-loader