如何优雅的发布一个 TypeScript 软件包?

向 NPM 发布软件包本身并不是一个特别困难的挑战。但是,配置你的 TypeScript 项目以取得成功可能是一个挑战。你的软件包能在大多数项目上运行吗?用户能否使用类型提示和自动完成功能?它能与 ES Modules (ESM) 和 CommonJS (CJS) 风格的导入一起使用吗?

阅读完本篇文章后,你将了解如何使你的 TypeScript 包在任何(或大多数)JavaScript 和 TypeScript 项目中更易于访问和使用,包括浏览器支持!

创建 TypeScript 项目 ​

如果你正在阅读本文,那么你很可能已经建立了一个 TypeScript 项目。如果这样做,你可能想跳到后续步骤或留下来检查是否存在差异。

让我们首先创建基本 Node.js 项目并添加 TypeScript 作为开发依赖项:

npm init -y
npm install typescript --save-dev

你可能希望在 src 文件夹中构建代码。因此,让我们在其中创建包的入口点:

mkdir src
touch src/index.ts

现在,Node.js 和浏览器不理解 TypeScript,因此我们需要设置 tsc (TypeScript 编译器)将 TypeScript 代码编译为 JavaScript。让我们通过运行以下命令将 tsconfig.json 文件添加到我们的项目中:

npx tsc --init

如果我们现在运行 npx tsc,它会扫描我们的文件夹并在与 .ts 文件相同的目录中创建 .js 文件(这是不可取的)。让我们在运行之前添加更好的配置,以免造成混乱。

将以下行添加到 tsconfig.json

{"compilerOptions": {// ... Other options"rootDir": "./src", // Where to look for our code"outDir": "./dist", // Where to place the compiled JavaScript
}

我们还向 package.json 添加一个“build”脚本:

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

如果我们现在运行 npm run build ,一个新的 dist 文件夹将出现,其中包含已编译的 JavaScript。如果你使用的是 Git,请确保将 dist 文件夹添加到 .gitignore 中。

设置 tsc 以获得最佳开发者体验 ​

我们已经可以将 TypeScript 编译为 JavaScript。但是,如果你按原样将其发布到 npm,则只能在其他 JavaScript 项目中无缝使用它。此外,默认目标配置是“es2016”,而现代浏览器最多仅支持“es2015”。那么让我们解决这个问题吧!

首先,让我们将目标(target)更改为 es2015 (或 es6 ,因为它们是相同的)。 esModuleInterop 默认为 true。让我们保持原样,因为它通过允许 ESM 样式导入来提高兼容性。

我们使用 TypeScript 都有一个原因:类型!但是,如果你现在就构建并发布你的软件包,那么它将不会发布任何类型。让我们通过将 declaration 设置为 true 来解决这个问题。这将与 .js 文件一起生成声明文件(.d.ts)。仅凭这一点,你的软件包就能在 TypeScript 项目中使用,甚至在 JavaScript 项目中也能提供类型提示。

声明文件在改善支持和开发人员体验方面已经发挥了很大作用。然而,我们可以通过添加 declarationMap 来更进一步。这样,将生成源映射 (.d.ts.map),以将我们的声明文件 (.d.ts) 映射到我们的原始 TypeScript 源代码 (.ts)。这意味着代码编辑器在使用“转到定义”时可以转到原始 TypeScript 代码,而不是编译后的 JavaScript 文件。

当我们这样做时,sourceMap 将添加源映射文件 (.js.map),这些文件允许调试器和其他工具在实际处理发出的 JavaScript 文件时显示原始 TypeScript 源代码。

使用 declarationMap 或 sourceMap 意味着我们还需要将源代码与软件包一起发布到 npm。

综上所述,这是我们最终的 tsconfig.json 文件:

{"compilerOptions": {"target": "es2015","module": "commonjs","strict": true,"esModuleInterop": true,"rootDir": "./src","outDir": "./dist","sourceMap": true,"declaration": true,"declarationMap": true,}
}

package.json

这里的事情要简单得多。当用户导入包时,我们需要指定包的入口点。因此,让我们将 main 设置为 dist/index.js

除了入口点之外,我们还需要指定主要类型声明文件。在这种情况下,这将是 dist/index.d.ts

我们还需要指定随包一起提供哪些文件。当然,我们需要发送构建的 JavaScript 文件,但由于我们使用的是 sourceMapdeclarationMap ,所以我们还需要发送 src

这是包含所有内容的参考 package.json

{"name": "the-greatest-sdk", // Your package name"version": "1.0.3", // Your package version"main": "dist/index.js","types": "dist/index.d.ts","scripts": {"build": "tsc"},"keywords": [], // Add related keywords"author": "liblab", // Add yourself here"license": "ISC","files": ["dist", "src"],"devDependencies": {"ts-node": "^10.9.1","typescript": "^5.0.4"}
}

发布到 NPM​

发布到 NPM 并不困难。我强烈建议你查看官方说明,但以下是一般步骤:

  1. 确保你的 package.json 设置正确。
  2. 构建项目(如果你遵循指南,则使用 npm run build )。
  3. 如果你还没有登录,请使用 npm login 向 npm 进行身份验证(你需要一个 npm 帐户)。
  4. 运行 npm publish

请记住,如果你更新软件包,则需要在再次发布之前增加 package.json 中的 version 选项。

有更复杂的(和推荐的)方法来进行发布,例如使用 GitHub Action 和 releases,特别是对于开源包,但这超出了本文的范围。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式、grep过滤工具、sed基本用法、sed基本操作指令、sed应用案例

1 案例1:使用正则表达式 1.1 问题 本案例要求熟悉正则表达式的编写,完成以下任务: 利用grep或egrep工具练习正则表达式的基本用法 1.2 方案 表-1 基本正则列表 表-2 扩展正则列表 1.3 步骤 实现此案例需要按照如…

算法训练 day28 | 93.复原IP地址 78.子集 90.子集II

93.复原IP地址 题目链接:复原IP地址 视频讲解:回溯算法如何分割字符串并判断是合法IP? 递归 1、确定递归函数返回值和参数 声明一个全局变量(字符串数组),保存满足条件的字符串作为结果。分割和加 . 时直接对原字符串进行处理…

微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需…

openssl3.2/test/certs - 024 - EC cert with named curve

文章目录 openssl3.2/test/certs - 024 - EC cert with named curve概述笔记END openssl3.2/test/certs - 024 - EC cert with named curve 概述 openssl3.2 - 官方demo学习 - test - certs 官方脚本骗人的, 并没有生成ecc证书, 应该是官方脚本有bug, 可以借鉴官方思路, 自己…

CS8370错误,这是由于使用了C# 7.3中不支持的功能

目录 背景: 第一种方法: 第二种办法: 背景: 在敲代码的时候,程序提示报错消息提示:CS8370错误,那么这是什么原因导致的,这是由于使用了C# 7.3中不支持的功能,不支持该功能,那就是版本太低我们就需要升级更高的版本&…

振弦采集仪在桥梁健康监测中的应用与分析

振弦采集仪在桥梁健康监测中的应用与分析 振弦采集仪是一种专门用于桥梁健康监测的设备,通过对桥梁结构的振动信号进行采集和分析,可以实时监测桥梁的结构健康状况并提前预警潜在问题。 振弦采集仪主要通过在桥梁结构上安放振弦传感器,采集…

linux usb设备网络共享 usb/ip

USB设备的网络共享可以通过USB/IP来实现, USB/IP把USB I/O信息封装成TCP/IP格式在网络端传输 ,可以实现usb的全部功能,且跨平台,是个透明的设备共享机制。 一、服务端 $sudo modprobe usbip-core$sudo modprobe usbip_host$usbip…

LiveVideoStack人物专访:深耕多媒体二十载,他怎么看未来的视频云?

抓住已知的,迎面未知的。 编者按: 大模型、降本、出海,是多媒体从业者交流的高频词,内容与交互的需求层出不穷,大模型与AI的演进目不暇接,让增速低走的视频云迎面新的机遇和挑战。作为一个跨越中美多媒体行…

[MySQL]基础的增删改查

目录 1.前置介绍 2.数据库操作 2.1显示当前数据库 2.2创建数据库 2.3 使用数据库 2.4 删除数据库 3.常用数据类型 3.1整型和浮点型 3.2字符串类型 4.表的操作 4.1查看表结构 4.2创建表 4.3删除表 5.重点 5.1操作数据库 5.2常用数据类型 5.3操作表 1.前置介绍 …

微信小程序首页、界面布局、功能简洁(示例三)

微信小程序首页界面布局、页面简洁,功能简单 直接上具体代码: 1、js代码 Page({/*** 页面的初始数据*/data: {imgList: [../../images/demo.jpg, ../../images/demo.jpg, ../../images/demo.jpg],navList: [{src: ../../images/nav1.png,title: 菜单一}…

IntelliJ IDEA 快捷键大全

IntelliJ IDEA 快捷键大全 一、文本编辑二、构建、编译项目 一、文本编辑 CtrlN 查找类 CtrlN 查找文件 CtrlF 查找文本 可以根据需求去选择红框内的选项 CtrlX 剪切 剪切选中文本,如果未选中则剪切当前行CtrlC 复制 复制选中文本,如果未选中则复制当前…

WEB前端递归数组模块详解

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><script>function fn(n){for(let i 0; i< n; i){for(let j 0; j < n; j){console.log(i)}}}//递归函数&#xff1a;…

机器学习工程师在人工智能时代的角色

机器学习工程师在人工智能时代的角色 在当今的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已成为许多行业不可或缺的一部分。从流程自动化到增强客户体验&#xff0c;人工智能具有改变企业的巨大潜力。这一变革性技术的核心是机器学习&#xff0c;该领域专注于开…

【Flink-1.17-教程】-【四】Flink DataStream API(3)转换算子(Transformation)【用户自定义函数(UDF)】

【Flink-1.17-教程】-【四】Flink DataStream API&#xff08;3&#xff09;转换算子&#xff08;Transformation&#xff09;【用户自定义函数&#xff08;UDF&#xff09;】 1&#xff09;函数类&#xff08;Function Classes&#xff09;2&#xff09;富函数类&#xff08;R…

智慧工厂视频监控平台EasyCVR公网收流后内网设备无法播放是什么原因?

安防视频监控平台EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;此外&am…

如何在科技创新中发挥国有企业的战略支撑作用?

要在科技创新中发挥国有企业的战略支撑作用&#xff0c;需要采取以下措施&#xff1a; 1. 强化国有企业创新主体地位&#xff1a;鼓励和支持国有企业加强技术创新、产品创新、组织创新和市场创新&#xff0c;提高自主创新能力。政府可以给予国有企业一定的政策和资金支持&…

机器学习分类模型评价指标总结(准确率、精确率、召回率、Fmax、TPR、FPR、ROC曲线、PR曲线,AUC,AUPR)

为了看懂论文&#xff0c;不得不先学一些预备知识&#xff08;&#xff08;55555 主要概念 解释见图 TP、FP、TN、FN 准确率、精确率&#xff08;查准率&#xff09;、召回率&#xff08;查全率&#xff09; 真阳性率TPR、伪阳性率FPR F1-score2TP/(2*TPFPFN) 最大响应分…

netty源码:(46) TailContext

TailContext是DefaultChannelPipeline中的一个内部类&#xff0c;它是一个ChannelInboundHandler TailContext在我们所添加的自己定义的所有ChannelInboundHandler(比如通过addLast方法&#xff09;之后&#xff0c;是整个入栈消息处理的最后一环&#xff0c;也就是tail. 它的…

Django 手把手教你搭建MYSQL多数据源 实现读写分离

目录 一、创建3.2版本的Django项目 二、配置MYSQL多数据源 三、实现读写分离 一、创建3.2版本的Django项目 第一步&#xff1a;创建虚拟环境 第二步&#xff1a;打开终端安装django pip install django3.2 第三步&#xff1a;创建项目 django-admin startproject django_…

windows用msvc编译opencv、opencv-python、opencv_contrib、cuda

如要用mingw编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/135741806。 如要用Ubuntu编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/131720128。 一、安装VS2022&…