如何用webpack生成d.ts和d.ts.map文件？ [英] How to generate d.ts and d.ts.map files using webpack?

问题描述

我找不到用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+纱线。我的一个包是core(将在其他包中使用)，它是用TS和JS编写的。

我使用的是webpack 4，巴别塔加载器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中，以便您可以克隆和使用它)。

推荐答案

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

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

---

如果您使用的是绝对路径，则输出的d.ts文件还将包含无用的绝对路径，并将导致类型脚本编译错误。

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

这篇关于如何用webpack生成d.ts和d.ts.map文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！