如何使用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软件包的类型定义和实现，但是我只能通过webpack生成index.js和index.js.map：

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

您可以直接调用Typescript编译器tsc来实现。

使用tsc --declaration输出.d.ts文件，并使用tsc --declarationMap生成对应的地图文件。

您可以在此处找到更多文档： https://www.typescriptlang.org/docs/handbook/compiler-options.html

Answer 2

问题是我怀疑您在扩展的tsconfig中具有“ allowJS”：true，当allowJS和声明true同时打开时，则不会构建声明。

您也不需要特定于类型的加载程序，只需在tsconfig中声明为true，然后使用标准的Typescript加载程序，就可以将键入内容构建到tsconfig中指定的输出目录中，而不是在Webpack中。

Answer 3

在ts-loader之前运行babel-loader可以解决问题。

仅需要指定config中的声明文件即可。

---

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

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