如何用webpack生成d.ts和d.ts.map文件?
我找不到用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相关文章