当发布 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. .NET 平台上的开源模型训练与推理进展

    .NET 平台上的开源模型训练与推理进展 作者:痴者工良 博客:https://www.whuanle.cn 电子书仓库:https://github.com/whuanle/cs_pytorch M ...

  2. mac使用pptp的正确方式

    环境:macos mojave 10.14.6 尝试的解决方案: mac自带vpn 结论:已经不支持pptp协议 使用shimo 结论:无用,连接的时候没反应 为了解决不能连接的问题,某老外写的ppt ...

  3. VS2019 webApi(.net core2.2版本)上传到Gitee

    一.本地创建项目 创建本地项目,依次点击下一步,在选择"目标框架"时选择2.2, 二.配置swagger 1.添加依赖项 2.修改Startup.cs public void Co ...

  4. Java的"伪泛型"变"真泛型"后,会对性能有帮助吗?

    泛型存在于Java源代码中,在编译为字节码文件之前都会进行泛型擦除(type erasure),因此,Java的泛型完全由Javac等编译器在编译期提供支持,可以理解为Java的一颗语法糖,这种方式实 ...

  5. git-fame实战操作

    参考网址:https://pydigger.com/pypi/git-fame,https://github.com/casperdcl/git-fame Git-fame 简介: Pretty-pr ...

  6. 轮播图导航组件 | 纯血鸿蒙组件库AUI

    摘要: 轮播图导航(A_SwiperNav):实现沉浸式体验的App全屏轮播引导页效果.可设置图片数据(含文本.图片地址.路由.标题.子标题),可设置按钮颜色. 一.在页面当中调用轮播图导航组件 打开 ...

  7. 使用C#构建一个同时问多个LLM并总结的小工具

    前言 在AI编程时代,如果自己能够知道一些可行的解决方案,那么描述清楚交给AI,可以有很大的帮助. 但是我们往往不知道真正可行的解决方案是什么? 我自己有过这样的经历,遇到一个需求,我不知道有哪些解决 ...

  8. IDEA问题之“调整IDEA字体大小”

    调整IDEA字体大小 1.正常版 2. 远程版

  9. 手把手教你使用C#创建一个WebSearchAgent

    PocketFlowSharp介绍 最近我对PocketFlow比较感兴趣,不仅是因为它是一个极简的LLM框架,更加让我觉得很不错的地方在于作者提供了很多方便学习的例子,就算没有LLM应用开发经验,也 ...

  10. RPC实战与核心原理之优雅关闭

    优雅关闭:如何避免服务停机带来的业务损失? 上线的大致流程 当服务提供方要上线的时候,一般是通过部署系统完成实例重启.在这个过程中,服务提供方的团队并不会事先告诉调用方他们需要操作哪些机器,从而让调用 ...