如何更好地发布 TypeScript npm 包
当发布 TypeScript 编写的 npm 包时,应该遵循一些最佳实践来确保包的可用性和可维护性。以下是推荐的项目结构和发布流程:
推荐的项目结构
my-package/
├── src/ # TypeScript 源代码
│ ├── index.ts # 主入口文件
│ └── ... # 其他源文件
├── dist/ # 编译后的 JavaScript 文件 (由构建工具生成)
├── types/ # 类型声明文件 (通常执行tsc会自动生成)
├── test/ # 测试代码
├── package.json
├── tsconfig.json # TypeScript 配置
└── README.md
关键步骤
分离源码和编译输出
- 保持
src/和dist/分离 - 将
dist/添加到.gitignore
- 保持
配置 TypeScript 编译
在tsconfig.json中设置:{
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src",
"declaration": true, // 生成 .d.ts 类型声明文件
"declarationDir": "./types",
"module": "commonjs", // 或 "es2015" 根据目标环境
"target": "es5" // 根据需求调整
},
"exclude": ["node_modules", "dist", "test"]
}
配置 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"
}
}
构建和发布流程
- 开发时在
src/中编写代码 - 运行
npm run build编译代码 - 运行
npm publish发布包 (会自动运行 prepublishOnly 脚本)
- 开发时在
进阶建议
支持多种模块格式:
- 使用 Rollup 或 esbuild 生成 CommonJS 和 ES Module 两种格式
- 在 package.json 中设置
"main"(CJS) 和"module"(ESM)
代码质量检查:
- 添加 ESLint 和 Prettier
- 设置单元测试
版本控制:
- 遵循语义化版本控制 (SemVer)
- 使用
npm version命令管理版本
文档:
- 提供清晰的 README
- 使用 TypeDoc 生成 API 文档
通过这样的结构,你的 TypeScript 包将更易于维护,同时为使用者提供更好的开发体验。
发包
npm publish // 发布普通包
npm publish --access public // 发布域级包
npm unpublish --force
如何更好地发布 TypeScript npm 包的更多相关文章
- 如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包?
如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store nod ...
- 从0到1发布一个npm包
从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...
- (转)前端开发-发布一个NPM包之最简单易懂流程
原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...
- 如何发布一个npm包(基于vue)
前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...
- 如何发布一个npm包?
npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步 ...
- 发布一个npm包(webpack loader)
发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...
- 如何发布一个 npm 包
一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- 发布一个npm包
前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...
- 将Angular6自己定义的模块发布成npm包
创建自己的模块组件 1. ng new 一个工程 2. ng g m 创建模块 例如我这里的modules文件下创建header模块 3. ng g c modules/head 创建一个hear组件 ...
随机推荐
- Windows IntelliJ IDEA 快捷键终极大全
自动代码 常用的有fori/sout/psvm+Tab即可生成循环.System.out.main方法等boilerplate样板代码 . 例如要输入for(User user : users)只需输 ...
- python,批量修改文件后缀名
比如,D盘test目录下有以下几个没有后缀的文件,需要修改为txt结尾 python代码如下 # python批量更换后缀名 import os import sys #需要修改后缀的文件目录 os. ...
- 深入解析Tortoise-ORM关系型字段与异步查询
title: 深入解析Tortoise-ORM关系型字段与异步查询 date: 2025/05/01 00:12:39 updated: 2025/05/01 00:12:39 author: cmd ...
- Java编程--多例设计模式
多例设计模式 多例设计模式(Multiton Pattern),有时也被称为对象池(Object Pool)模式,是一种创建型设计模式.与单例模式不同,多例模式允许创建并管理多个实例,每个实例都有一个 ...
- linux vim增强使用
目录 删除 编辑 删除 删除当前行 dd 删除当前行后面的所有行 dG 编辑 恢复为未修改前的状态 uu
- JAVA安全之JDK8u141版本绕过研究
基本介绍 从JDK8u141开始JEP290中针对RegistryImpl_Skel#dispatch中bind.unbind.rebind操作增加了checkAccess检查,此项检查只允许来源为本 ...
- 信息资源管理综合题之“LJ集团信息化项目规划问题”
一.LJ集团是北京的一家规模巨大的房地产投资公司,早在15年前,该公司出现了如下几个问题:每个业务员手上的用户资料,其他人无法得知,从而导致员工离职时会流失大量潜在客户:业务员繁忙的时候,无法满足客户 ...
- 《OKR》| 聚焦小目标, 成就大梦想
今天想和大家分享的书籍是 <每个人的 OKR>. 恰好我司也是采用 OKR 结合 KPI 的方式进行目标和绩效管理, 在实践中通过放大目标的功能, 缩小行动的自由, 聚焦在单一方向的机制, ...
- AI制作祝福视频,直播礼物收不停,广州塔、动态彩灯、LED表白(附下载链接)
在追剧的时候经常能看到一些浪漫的告白桥段,男主用圣诞彩灯表白.用城市标志性建筑的LED表白,或者在五光十色的烟花绽放后刻下女主角的名字,充满了仪式感和氛围感~ 现在,这样的表白效果用AI软件就能实现了 ...
- 全网第二细致的Verl GRPO实现拆解讲解
全网第二细致的Verl GRPO实现拆解讲解 标题党致歉,纯引流 观前提示,内含大量注释代码,善用左侧目录跳过可改善阅读体验 本篇文章是在锝人的报告下继续撰写,主要着重于讲解verl实现中一些GRPO ...