V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xxss0903
V2EX  ›  TypeScript

TypeScript 项目打包发布到 npm,如何给方法和接口添加 dts

  •  
  •   xxss0903 · 9 天前 · 933 次点击

    最近写了一个库发布到了 npm 源码使用的 TypeScript 开发的,然后用了 vite 进行打包,现在我已经发布到 npm 上面了 但是在使用的时候引入包的时候会出现 ts 的错误,因为打包之后没有 dts 文件 不知道要怎么给打包到 npm 的包添加需要暴露的 dts 文件 这个是 npm 的包地址: https://www.npmjs.com/package/liteofd 下面是我在 demo 项目里面引入的报错

    import { LiteOfd, OfdDocument } from 'liteofd'
    
    Could not find a declaration file for module 'liteofd'. 'node_modules/liteofd/dist/liteofd.es.js' implicitly has an 'any' type.
      There are types at 'node_modules/liteofd/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'liteofd' library may need to update its package.json or typings.
    

    下面的图是打包发布到 npm 上面的结构 结构 1 结构 2 我在网上也查询了,但是因为不是前端开发,所以一直没弄好如何给这个项目添加 dts 希望熟悉 TypeScript 的各位帮帮忙帮我看看我要怎么改项目添加 dts 文件让用户引用包不会报错 ps:dts-gen 我也安装并按照网上的使用还是不行,就报错说 module 的问题

    13 条回复    2024-10-24 00:01:41 +08:00
    zcf0508
        1
    zcf0508  
       9 天前
    vite 构建需要引入 vite-plugin-dts ,可以参考下这个

    https://github.com/zcf0508/blocknote-vue/blob/main/vite.config.ts#L33
    zbinlin
        2
    zbinlin  
       9 天前
    在 package.json 里加上 types 字段
    sparkinglemon
        3
    sparkinglemon  
       9 天前
    ```json
    {
    ...
    "types": "./dist/index.d.ts",
    "exports": {
    ".": {
    "require": "./dist/index.cjs",
    "import": "./dist/index.js",
    "types": "./dist/index.d.ts"
    }
    },
    ...
    }
    ```

    根据你最后具体的打包结果修改
    xxss0903
        4
    xxss0903  
    OP
       9 天前
    @sparkinglemon 请问下这个是加到 package.json 里面吗
    sparkinglemon
        5
    sparkinglemon  
       9 天前
    @xxss0903 是,你看一下你 build 之后对应的.d.ts 文件在哪,报错提示里写的 “There are types at 'node_modules/liteofd/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports".”
    subframe75361
        6
    subframe75361  
       9 天前
    自己总结的: https://juejin.cn/post/7254836247290052663

    省流:tsup
    xxss0903
        7
    xxss0903  
    OP
       9 天前
    @sparkinglemon 意思是要根据 index.d.ts 的位置来配置 package.json 中的 export 的内容吗
    xxss0903
        8
    xxss0903  
    OP
       9 天前
    @subframe75361 是用 tsup 进行打包吗,我没用过这个,这就去试试
    CLMan
        9
    CLMan  
       8 天前
    vite 是开发 web 应用的脚手架,你只是开发模块/库,如果不需要使用 web 页面进行辅助开发和测试,是不需要上 vite 的。

    当然上了也不是什么错,毕竟可以利用其默认配置,比如 eslint 、prettier 相关默认设置。但是需要额外的配置,因为 vite 是面向 web 应用设计的,你用来开发库,其构建目标就和默认情况发生偏差,你需要添加额外的构建配置。

    前面楼层提到的 package.json 里面的`exports`,`import`,`types`等字段,应该由构建工具来修改,不建议手动修改。

    ESM 现在是主流的模块解决方案,webpack 这样的旧时代构建工具很少被使用了,构建工具有 rollup ,也包括前面提到的 tsup ,vite 是基于 rollup 的,所以你没必要引入额外的构建工具,当然你硬要用 tsup 也不会存在什么问题,只是 rollup 与 vite 集成度更高而已。

    如过你使用 rollup ,就需要添加 rollup 的相关配置来构件库。你需要阅读 rollup 官网文档,以及 vite 官网的 rollup 部分的文档,了解如何添加构建库的配置。

    这就是你这问题的相关解决思路。
    CLMan
        10
    CLMan  
       8 天前
    @CLMan 之前没看你项目源码,看了下,引入 vite-plugin-dts 是正确答案。
    xxss0903
        11
    xxss0903  
    OP
       8 天前
    @CLMan 我现在成功打包了 index.cjs ,也能正常的创建了 index.d.ts 来进行类型的引用
    但是又发现另外一个问题,就是我的库使用了一些字体文件,就是静态资源放在了 assets 里面
    然后我写了一个 vue 的 demo 项目通过 package.json 引入这个库,其中的类和方法能够使用了,但是 assets 中的字体没有被引用到,我打开开发者工具里面查看 sources 里面,发现引用的源码在.vite/deps 里面,有一个 liteofd.js 的代码是我项目里面用到的,但是却没有 assets 中的字体文件
    但是在 node_modules 里面的 liteofd 库里面是有 assets 和字体文件的
    CLMan
        12
    CLMan  
       8 天前
    @xxss0903 你这涉及到字体等资源文件了,我只用 TypeScript 写过传统的逻辑库和 web 应用,没写过 web 组件库。

    你可以参考与你项目类似的 pdf.js: https://www.npmjs.com/package/pdfjs-dist ,看它是怎么打包资源文件的。
    xxss0903
        13
    xxss0903  
    OP
       8 天前
    @CLMan 好的,谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5932 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 02:21 · PVG 10:21 · LAX 19:21 · JFK 22:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.