当发布 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. Windows IntelliJ IDEA 快捷键终极大全

    自动代码 常用的有fori/sout/psvm+Tab即可生成循环.System.out.main方法等boilerplate样板代码 . 例如要输入for(User user : users)只需输 ...

  2. python,批量修改文件后缀名

    比如,D盘test目录下有以下几个没有后缀的文件,需要修改为txt结尾 python代码如下 # python批量更换后缀名 import os import sys #需要修改后缀的文件目录 os. ...

  3. 深入解析Tortoise-ORM关系型字段与异步查询

    title: 深入解析Tortoise-ORM关系型字段与异步查询 date: 2025/05/01 00:12:39 updated: 2025/05/01 00:12:39 author: cmd ...

  4. Java编程--多例设计模式

    多例设计模式 多例设计模式(Multiton Pattern),有时也被称为对象池(Object Pool)模式,是一种创建型设计模式.与单例模式不同,多例模式允许创建并管理多个实例,每个实例都有一个 ...

  5. linux vim增强使用

    目录 删除 编辑 删除 删除当前行 dd 删除当前行后面的所有行 dG 编辑 恢复为未修改前的状态 uu

  6. JAVA安全之JDK8u141版本绕过研究

    基本介绍 从JDK8u141开始JEP290中针对RegistryImpl_Skel#dispatch中bind.unbind.rebind操作增加了checkAccess检查,此项检查只允许来源为本 ...

  7. 信息资源管理综合题之“LJ集团信息化项目规划问题”

    一.LJ集团是北京的一家规模巨大的房地产投资公司,早在15年前,该公司出现了如下几个问题:每个业务员手上的用户资料,其他人无法得知,从而导致员工离职时会流失大量潜在客户:业务员繁忙的时候,无法满足客户 ...

  8. 《OKR》| 聚焦小目标, 成就大梦想

    今天想和大家分享的书籍是 <每个人的 OKR>. 恰好我司也是采用 OKR 结合 KPI 的方式进行目标和绩效管理, 在实践中通过放大目标的功能, 缩小行动的自由, 聚焦在单一方向的机制, ...

  9. AI制作祝福视频,直播礼物收不停,广州塔、动态彩灯、LED表白(附下载链接)

    在追剧的时候经常能看到一些浪漫的告白桥段,男主用圣诞彩灯表白.用城市标志性建筑的LED表白,或者在五光十色的烟花绽放后刻下女主角的名字,充满了仪式感和氛围感~ 现在,这样的表白效果用AI软件就能实现了 ...

  10. 全网第二细致的Verl GRPO实现拆解讲解

    全网第二细致的Verl GRPO实现拆解讲解 标题党致歉,纯引流 观前提示,内含大量注释代码,善用左侧目录跳过可改善阅读体验 本篇文章是在锝人的报告下继续撰写,主要着重于讲解verl实现中一些GRPO ...