”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何在 NPM 上创建和发布 TypeScript 包

如何在 NPM 上创建和发布 TypeScript 包

发布于2024-08-27
浏览:807

Como Criar e Publicar Pacotes TypeScript no NPM
随着 TypeScript 的日益流行,许多开发人员正在创建静态类型包以利用该语言提供的优势。在这篇文章中,我们将介绍使用 TypeScript 创建和发布 NPM 包的过程。


1. 配置环境

确保您已安装 Node.js、NPM 和 TypeScript。您可以使用以下命令全局安装 TypeScript:

npm install -g typescript

检查一切是否安装正确:

node -v
npm -v
tsc -v

2. 创建项目

首先为您的项目创建一个目录:

mkdir meu-pacote-typescript
cd meu-pacote-typescript

初始化 Node.js 项目:

npm init

这将创建 package.json 文件,您可以在其中定义基本包信息。

3. 配置 TypeScript

现在,初始化一个 TypeScript 项目:

tsc --init

这将创建一个 tsconfig.json 文件。根据需要进行编辑,但常见的设置如下:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

在这里,我们配置 TypeScript 编译器来生成带有 CommonJS 模块的 ES6 代码,并包含类型声明(声明:true)。编译后的代码会放在dist.

目录下

4. 编写代码

创建一个 src 目录并在其中创建一个文件index.ts:

mkdir src
touch src/index.ts

在index.ts文件中,编写您的包代码。让我们创建一个简单的函数来将字符串转换为大写:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. 编译代码

将 TypeScript 编译为 JavaScript:

tsc

这将在 dist 目录中生成 JavaScript 文件和类型声明。

6. 本地测试包

要测试您的包,您可以将其本地安装在另一个项目中:

  1. 在您的测试项目目录中,运行:
   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist
  1. 在测试项目中使用该函数:
   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

这确保 JavaScript 代码和类型声明都能正常工作。

7. 在NPM上发布

如果一切正常,您就可以发布您的包了。

  1. NPM登录

如果您还没有 NPM 帐户,请创建一个并登录:

   npm login
  1. 发布

发布之前,在package.json中添加构建脚本:

   "scripts": {
     "build": "tsc"
   }

并在package.json中添加输出路径:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

现编译发布:

   npm run build
   npm publish

如果包名称已存在,则需要选择一个新名称。

8. 更新包

要发布新版本,请更改package.json中的版本,再次运行npm run build,然后发布:

npm publish

9. 最佳实践

  • 文档:包含一个 README.md 文件,解释如何使用您的包。
  • 测试:使用 Jest 等框架编写测试,以确保代码按预期工作。
  • Linting:使用 ESLint 和 Prettier 等工具来维护代码质量。
  • 版本控制:按照 SemVer 对您的包进行版本控制。

结论

在 NPM 上创建和发布 TypeScript 包不仅可以提高代码质量,还可以为使用包的用户提供打字优势。通过遵循本指南,您将准备好与 JavaScript 和 TypeScript 社区分享您的解决方案,为更强大、更稳健的开发生态系统做出贡献。

现在您已经了解了流程,那么开始构建您的下一个 TypeScript 包怎么样?

版本声明 本文转载于:https://dev.to/lucaspereiradesouzat/como-criar-e-publicar-pacotes-typescript-no-npm-3gd4?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Java中Lambda表达式为何需要“final”或“有效final”变量?
    Java中Lambda表达式为何需要“final”或“有效final”变量?
    Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...
    编程 发布于2025-07-03
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-07-03
  • 如何使用Python理解有效地创建字典?
    如何使用Python理解有效地创建字典?
    在python中,词典综合提供了一种生成新词典的简洁方法。尽管它们与列表综合相似,但存在一些显着差异。与问题所暗示的不同,您无法为钥匙创建字典理解。您必须明确指定键和值。 For example:d = {n: n**2 for n in range(5)}This creates a dicti...
    编程 发布于2025-07-03
  • 表单刷新后如何防止重复提交?
    表单刷新后如何防止重复提交?
    在Web开发中预防重复提交 在表格提交后刷新页面时,遇到重复提交的问题是常见的。要解决这个问题,请考虑以下方法: 想象一下具有这样的代码段,看起来像这样的代码段:)){ //数据库操作... 回声“操作完成”; 死(); } ?> ...
    编程 发布于2025-07-03
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。isement(Isement() trim whitespace whitesp...
    编程 发布于2025-07-03
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-07-03
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-07-03
  • JavaScript计算两个日期之间天数的方法
    JavaScript计算两个日期之间天数的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    编程 发布于2025-07-03
  • 如何高效地在一个事务中插入数据到多个MySQL表?
    如何高效地在一个事务中插入数据到多个MySQL表?
    mySQL插入到多个表中,该数据可能会产生意外的结果。虽然似乎有多个查询可以解决问题,但将从用户表的自动信息ID与配置文件表的手动用户ID相关联提出了挑战。使用Transactions和last_insert_id() 插入用户(用户名,密码)值('test','test...
    编程 发布于2025-07-03
  • Java为何无法创建泛型数组?
    Java为何无法创建泛型数组?
    通用阵列创建错误 arrayList [2]; JAVA报告了“通用数组创建”错误。为什么不允许这样做?答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<myO...
    编程 发布于2025-07-03
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-07-03
  • 版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    在时间戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源于遗留实现的关注,这些限制需要对当前的_timestamp功能进行特定的实现。 创建表`foo`( `Productid` int(10)unsigned not n...
    编程 发布于2025-07-03
  • 如何处理PHP文件系统功能中的UTF-8文件名?
    如何处理PHP文件系统功能中的UTF-8文件名?
    在PHP的Filesystem functions中处理UTF-8 FileNames 在使用PHP的MKDIR函数中含有UTF-8字符的文件很多flusf-8字符时,您可能会在Windows Explorer中遇到comploreer grounder grounder grounder gro...
    编程 发布于2025-07-03
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-07-03
  • 查找当前执行JavaScript的脚本元素方法
    查找当前执行JavaScript的脚本元素方法
    如何引用当前执行脚本的脚本元素在某些方案中理解问题在某些方案中,开发人员可能需要将其他脚本动态加载其他脚本。但是,如果Head Element尚未完全渲染,则使用document.getElementsbytagname('head')[0] .appendChild(v)的常规方...
    编程 发布于2025-07-03

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3