如何用webpack生成d.ts和d.ts.map文件?

2022-08-02 00:00:00 javascript webpack typescript babeljs

我找不到用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.jsindex.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-pluginnpm-dts-webpack-plugindts-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

相关文章