如何使用 webpack 生成 d.ts 和 d.ts.map 文件？答案

【问题标题】：How to generate d.ts and d.ts.map files using webpack?如何使用 webpack 生成 d.ts 和 d.ts.map 文件？
【发布时间】：2019-08-14 13:33:09
【问题描述】：

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

这是一个包含所有设置的最小 repo：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 中列出，因此您可以克隆和使用它。

【问题讨论】：

据我了解（阅读大约 10 分钟）babel 并没有真正编译你的 tsc，它只是将它全部删除为纯 js？所以它不会为你吐出类型定义吗？似乎你必须让 webpack 使用 ts-loader 或其他东西，然后吐出你的 js 文件以被 babel 包含。（希望更熟悉的人可以更确定地回答您的问题！）
你没看错。我不想搬到ts-loader，因为我需要所有包代码的 babel。我还编辑了问题以使其更清楚。

标签： javascript typescript webpack babeljs

【解决方案1】：

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

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

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

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

【讨论】：

aaaaahhh，我已经为此头疼了 2 天。最后添加 ts-loader 工作。谢谢你。
您也可以在构建命令的末尾添加'tsc'，而不是安装另一个加载器（ts-loader），但是您已经配置了ts.config，因此它只发出如图所示的类型声明这里typescriptlang.org/docs/handbook/babel-with-typescript.html

【解决方案2】：

您可以直接调用 Typescript 编译器tsc 来执行此操作。

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

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

【讨论】：

我想从 webpack 中生成它们，否则我需要将所有内容编译两次...
我明白了。我无法为您提供具体帮助。
Stav，继续 gitter 我正试图在那里给你发消息。
@ShanonJackson 我联系了你。
嗯，如果 Babel 出于速度原因实际上没有编译 ts，我不会考虑编译两次