Rollup + TypeScript 编译类型声明文件

hello 大家好,我是 SuperYing。本文将从工具库开发者角度讲述如何编译 TypeScript 类型声明文件。

大家在使用 TS 作为开发语言,引入 JS 库的时候,经常遇到这样的报错:无法找到模块“@superying/remote-ui”的声明文件...

这是由于引用的 JS 库没有对应的类型声明文件造成的,若 @types/ 没有维护响应的类型库,则需要自己手动在 .d.ts 中声明:

  1. // 如 global.d.ts
  2. declare module @superying/remote-ui

以上是从引用者角度解决 JS 库模块声明问题,接下来将从工具库开发者角度讲述如果使用 rollup + TypeScript 编译类型声明文件,彻底告别手动声明的困扰。

1.使用 tsc 编译类型文件

TypeScript 配置提供了以下类型编译相关的配置项:

  1. "compilerOptions": {
  2. "declaration": true, /* 生成相关的 .d.ts 文件。 */
  3. "declarationDir": "./dist/types", /* .d.ts 文件输出目录 */
  4. "emitDeclarationOnly": true, /* 只生成声明文件,不生成 js 文件*/
  5. "rootDir": "./src", /* 指定输出文件目录(用于输出),用于控制输出目录结构 */
  6. }

我将类型编译配置独立出来到 tsconfig.types.json 文件中,专门用来做类型声明编译用。(注:由于 rollup 通过 rollup-plugin-typescript2 插件识别 TypeScript 语法,默认配置文件 tsconfig.json 给此插件使用,且仅包括常用配置)。

执行以下命令即可生成类型声明文件:

  1. tsc -b ./tsconfig.types.json

将上述命令添加到 npm script,就可以通过 npm run xxx 命令执行编译操作了。

2.如何让类型声明文件被引用

经过第一步,我们已经在指定位置生成的类型声明文件,但仅仅是生成了类型声明文件还不行,外部在引用该工具库的时候还是无法找到模块的声明文件。若要彻底解决这个问题,可以在 package.json 中配置 types 属性,将其指向生成的类型声明文件。下面是我的 package.json 的相关配置,包括 types 配置及编译类型声明文件的 npm script:

  1. {
  2. "name": "@superying/remote-ui",
  3. "version": "1.0.6",
  4. "main": "./dist/index.js",
  5. "module": "./dist/index.esm.js",
  6. "types": "./dist/types/index.d.ts", // 指向 tsc 读取的类型声明文件
  7. "umd": "./dist/index.umd.js",
  8. "devDependencies": { /** 省略.... */ },
  9. "scripts": {
  10. "clean:dist": "rimraf dist",
  11. "build:types": "npm run clean:dist && tsc -b ./tsconfig.types.json", // 编译类型
  12. "build": "npm run build:types && rollup -c",
  13. "build:min": "npm run build:types && cross-env NODE_ENV=production rollup -c",
  14. "test": "node test/test.js",
  15. "pretest": "npm run build" },
  16. "files": [ "dist" ]
  17. }

好啦,通过以上两步便可让你发布的工具库彻底免受 “无法找到模块 xxx 的声明文件” 的报错折磨啦。

最近才开始尝试输出内容,如有问题欢迎批评指正,谢谢!!!


文章标签:

原文连接:https://juejin.cn/post/7083862577578508324

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?