如何使用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。我的软件包之一core（将在其他软件包中使用）是用TS和JS编写的。

我正在将Webpack 4，Babel-loader 8用于ts-to-js。

其他包正在努力寻找类型定义和执行我的core包，但我只能够产生index.js和index.js.map使用的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。（它们列在的package.json中，core因此您可以对其进行克隆和使用）。

Answer 1

ts-loader之前运行babel-loader会奏效。

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

如果您使用的是绝对路径，输出的 d.ts 文件也将包含绝对路径，这些路径是无用的，会导致打字稿编译错误。

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