当发布 TypeScript 编写的 npm 包时,应该遵循一些最佳实践来确保包的可用性和可维护性。以下是推荐的项目结构和发布流程:

推荐的项目结构

my-package/
├── src/ # TypeScript 源代码
│ ├── index.ts # 主入口文件
│ └── ... # 其他源文件
├── dist/ # 编译后的 JavaScript 文件 (由构建工具生成)
├── types/ # 类型声明文件 (通常执行tsc会自动生成)
├── test/ # 测试代码
├── package.json
├── tsconfig.json # TypeScript 配置
└── README.md

关键步骤

  1. 分离源码和编译输出

    • 保持 src/dist/ 分离
    • dist/ 添加到 .gitignore
  2. 配置 TypeScript 编译

    tsconfig.json 中设置:

    {
    "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true, // 生成 .d.ts 类型声明文件
    "declarationDir": "./types",
    "module": "commonjs", // 或 "es2015" 根据目标环境
    "target": "es5" // 根据需求调整
    },
    "exclude": ["node_modules", "dist", "test"]
    }
  3. 配置 package.json

    {
    "name": "my-package",
    "version": "0.0.1-alpha.1",
    "main": "dist/index.js", // CommonJS 入口
    "module": "dist/index.esm.js", // ES Module 入口 (可选)
    "types": "types/index.d.ts", // 类型声明入口
    "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
    },
    "files": ["dist", "types"], // 发布时包含的目录
    "devDependencies": {
    "typescript": "^5.8.3"
    }
    }
  4. 构建和发布流程

    • 开发时在 src/ 中编写代码
    • 运行 npm run build 编译代码
    • 运行 npm publish 发布包 (会自动运行 prepublishOnly 脚本)

进阶建议

  1. 支持多种模块格式:

    • 使用 Rollup 或 esbuild 生成 CommonJS 和 ES Module 两种格式
    • 在 package.json 中设置 "main" (CJS) 和 "module" (ESM)
  2. 代码质量检查:

    • 添加 ESLint 和 Prettier
    • 设置单元测试
  3. 版本控制:

    • 遵循语义化版本控制 (SemVer)
    • 使用 npm version 命令管理版本
  4. 文档:

    • 提供清晰的 README
    • 使用 TypeDoc 生成 API 文档

通过这样的结构,你的 TypeScript 包将更易于维护,同时为使用者提供更好的开发体验。

发包

npm publish // 发布普通包
npm publish --access public // 发布域级包
npm unpublish --force

如何更好地发布 TypeScript npm 包的更多相关文章

  1. 如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包?

    如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store nod ...

  2. 从0到1发布一个npm包

    从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

  3. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  4. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  5. 如何发布一个npm包?

    npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步 ...

  6. 发布一个npm包(webpack loader)

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  7. 如何发布一个 npm 包

    一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...

  8. webpack创建library及从零开始发布一个npm包

    最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...

  9. 发布一个npm包

    前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...

  10. 将Angular6自己定义的模块发布成npm包

    创建自己的模块组件 1. ng new 一个工程 2. ng g m 创建模块 例如我这里的modules文件下创建header模块 3. ng g c modules/head 创建一个hear组件 ...

随机推荐

  1. TCP延迟调优之PSH参数与passt延迟问题修复

    qemu中使用passt来作为虚拟机的网卡NAT实现,希望能够利用它IP地址与host一致的优点.这本来是没有啥问题的,但是不知道为什么它的TCP入口流量的延迟很严重. 好吧,反正以后总是要改pass ...

  2. python获取指定文件夹内文件名称

    比如下图,文件夹内有若干文件,且文件夹路径:C:\Users\Administrator\Desktop\2147\1024 4行代码,解决问题 import os path = "C:\\ ...

  3. MySQL 的存储引擎有哪些?它们之间有什么区别?

    MySQL 的存储引擎及其区别 MySQL 提供多种存储引擎,不同存储引擎在数据存储方式.索引支持.事务处理等方面各具特点.以下列出常用的存储引擎及其主要区别. 1. 常见存储引擎 (1)InnoDB ...

  4. js判断iOS还是Android

    /** * 运行设备引擎, 即iOS, Android还是H5 * 返回值注意大小写 * @return iOS, Android, H5 */ function engineType() { let ...

  5. kubernetes dashboard web控制台调研

    背景 kubernetes 是目前最流行的容器化系统,管理的方式一般都是最基础的kubectl命令客户端进行管理,但是对与一些没有基础的研发人员并不是很友好,所以我们需要一些web控制台,类似于云厂商 ...

  6. K8s进阶之Deployment的更新&回滚

    更新概述 更新指的是对 Deployment 所管理应用的配置.镜像版本等进行修改并应用到集群中的过程.通过更新 Deployment,你能够实现应用功能的升级.修复漏洞.调整资源分配等操作. 更新触 ...

  7. C# 14 新增功能一览,你觉得实用吗?

    前言 今天咱们一起来看看在 C# 14 中新增的几个功能特性,是否给我们日常编码带了来便利. 前提准备 要体验 C# 14 中的新增功能,你需要安装最新的 Visual Studio 2022 版本或 ...

  8. 操作系统综合题之“采用FCFS(先进先出)调度算法执行,计算进程平均带权周转时间”

    一.问题:有3个进程p1.p2.p3,其进入系统的时间和服务器时间如下表所示,按FCFS调度算法,她们的平均带权周转时间是多少(注:四舍五入精确到小数点后两位) 二.参考答案 答: p1周转时间 = ...

  9. SpringSecurity配置 2

    SpringSecurity配置 2 目前的现状,虽然是有了登录认证的接口,但是登录完成后,当我们访问受保护的接口时,即使将 Token 令牌携带与请求一起发送,依然是无法请求成功.另外,提示信息如下 ...

  10. 在deepin环境下安装qt开发环境和dtk开发环境

    环境 deepinV20.2.2 第一步 进入系统,进入/etc/apt目录 以管理员身份打开(为了编辑源) 第二步 编辑源sources.list 放出第二行源保存并退出 第三步 进入终端,执行su ...