”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > tsup 捆绑您的 TypeScript 包

tsup 捆绑您的 TypeScript 包

发布于2024-09-01
浏览:372

您正在构建 TypeScript 库但不确定如何捆绑它?我推荐tsup。

以下是我考虑的因素:

1. NPM 注册中心每周下载量超过 100 万次

2. tsup 存储库有 8.6k 颗星,正在积极维护。

3. 有据可查。

4. 用于shadcn-ui/ui CLI包。

5. tsup内部使用rollup。

我查看了 tsup 源代码,它有 Nodejs 工作线程相关代码,其中包含各种推送消息并监听它们。这学习起来会很有趣,这也意味着我将进入一个与捆绑商打交道的不同领域。还不确定……

tsup to bundle your TypeScript package

查找 shadcn-ui/ui 中使用的 tsup 在很多方面对您有帮助:

1.您将了解如何“可以”实现 tsup

- 您在 OSS 中找到的实现可以帮助您以更好的方式浏览文档。

- 阅读整个文档很酷,但对我们中的一些人来说可能会不知所措。

2.通过阅读 shadcn-ui 源代码来查看它的实际效果。在 shadcn-ui/ui CLI 源代码中搜索 tsup 可以在两个地方找到:

  • 包.json
"scripts": {  
 "dev": "tsup - watch",  
 "build": "tsup",
  • tsup.config.ts
import { defineConfig } from "tsup"  

export default defineConfig({  
 clean: true,  
 dts: true,  
 entry: \["src/index.ts"\],  
 format: \["esm"\],  
 sourcemap: true,  
 minify: true,  
 target: "esnext",  
 outDir: "dist",  
})

此时,我只需阅读文档来了解这些选项是什么以及脚本是如何配置的。

这样我就不会因为文档而感到不知所措,而且我确切地知道我在寻找什么。这是我设定从文档中阅读和学习最多方向的方式。

首先,我在开源 CLI 相关包中也是这样做的,以捆绑我的 TS 库。

想学习如何从头开始构建 shadcn-ui/ui 吗?查看 从头开始构建

关于我:

网站:https://ramunarasinga.com/

Linkedin:https://www.linkedin.com/in/ramu-narasinga-189361128/

Github:https://github.com/Ramu-Narasinga

电子邮件:[email protected]

从头开始构建 shadcn-ui/ui

参考:

1. tsup 文档:https://tsup.egoist.dev/

2. npm: https://www.npmjs.com/package/tsup

3. tsup在shadcn-ui/ui中的使用:https://github.com/shadcn-ui/ui/blob/main/packages/cli/package.json#L33

4.我的开源CLI相关项目:https://github.com/Ramu-Narasinga/TThroo/blob/main/packages/cli/package.json#L35

版本声明 本文转载于:https://dev.to/ramunarasinga/tsup-to-bundle-your-typescript-package-1ln2?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 为开发人员和安全团队提供主动的 AppSec 持续漏洞管理
    为开发人员和安全团队提供主动的 AppSec 持续漏洞管理
    现代软件开发环境中哪些日益增长的网络安全风险让 CISO 忙碌? 开发人员和安全团队面临着越来越多的威胁,从复杂的开源和供应商控制的供应链攻击到 AI 生成的代码引入的漏洞,例如提示注入和 GitHub Copilot 的代码安全性差。现代应用程序通常严重依赖开源组件(例如在 npm、PyPI 或 ...
    编程 发布于2024-11-06
  • 如何使用 React 对 MeteorJS 中的 Bootstrap Spacing 实用程序类进行故障排除?
    如何使用 React 对 MeteorJS 中的 Bootstrap Spacing 实用程序类进行故障排除?
    在 Bootstrap 中使用间距实用程序类在 Bootstrap 中,间距实用程序类允许您轻松控制元素周围的间距。但是,如果您在使用它们时遇到问题,这里有一个指南可以帮助您解决。更新的间距语法(Bootstrap 4 和 5)Bootstrap 4 引入了间距实用程序类的简化语法:边距:m{sid...
    编程 发布于2024-11-06
  • 如何在Python中设置子进程的工作目录?
    如何在Python中设置子进程的工作目录?
    如何在Python中设置子进程的工作目录在Python中,subprocess.Popen()函数允许您在Py​​thon中执行命令子进程。一个常见的要求是指定子进程的工作目录。问题:如何使用 subprocess.Popen() 设置子进程的工作目录? 答案:要指定工作目录,请使用 subproc...
    编程 发布于2024-11-06
  • Pandas 什么时候创建视图而不是副本?
    Pandas 什么时候创建视图而不是副本?
    Pandas 视图与副本生成规则Pandas 在决定 DataFrame 上的切片操作是否产生视图或结果时采用特定规则复制。通过了解这些规则,您可以优化数据操作并避免意外行为。从始终生成副本的操作开始:所有操作,除了那些专门设计用于修改的操作就地 DataFrame,创建副本。只有某些操作支持 in...
    编程 发布于2024-11-06
  • 使用代理服务器解锁地理限制网站
    使用代理服务器解锁地理限制网站
    利用代理服务器绕过区域封锁是一种常用且有效的方法。代理服务器作为中介,可以隐藏用户的真实IP地址,使用户的请求看起来像是来自代理服务器的地理位置,从而绕过区域封锁。 使用代理服务器绕过区域封锁的关键步骤:‌‌ 选择合适的代理服务器‌:根据目标区域的网络环境和遮挡情况,选择覆盖该区域的...
    编程 发布于2024-11-06
  • 如何为三角形中的线性渐变锯齿线创建平滑边缘?
    如何为三角形中的线性渐变锯齿线创建平滑边缘?
    为线性渐变锯齿线创建平滑边缘为了设计具有由两个三角形形成的尖底的响应式图像,开发人员在三角形线上遇到了意外的锯齿状边缘。为了解决这个问题,我们探索了产生更平滑渐变过渡的策略。虽然硬停止线性渐变图像中的颜色通常会导致锯齿状边缘,但调整停止点和起始点可以缓解此问题。不要突然从一种颜色变为另一种颜色,而是...
    编程 发布于2024-11-06
  • Java 中“static”的魔力:一为所有,一切为一!
    Java 中“static”的魔力:一为所有,一切为一!
    老实说,当我们第一次遇到 static 关键字时,我们都会想:“这是什么魔法?” ?但别担心,我会用一种简单、深入、甚至有点有趣的方式来分解它! 想象一下你正在参加一个聚会?你和你所有的朋友都戴着帽子。但每个人都必须分享一顶帽子。这基本上就是 Java 中 static 关键字的作用!您不必为每个朋...
    编程 发布于2024-11-06
  • 如何在 Laravel Eloquent ORM 中对表进行别名以增强灵活性和可读性?
    如何在 Laravel Eloquent ORM 中对表进行别名以增强灵活性和可读性?
    Laravel 的 Eloquent 查询中的别名表:超越 DB::table在 Laravel 的 Eloquent ORM 中,您可以使用干净的、面向对象的方法与数据库进行交互。然而,有时您可能会遇到需要更大灵活性的查询,例如别名表。挑战考虑使用 Laravel 的查询生成器进行查询:$user...
    编程 发布于2024-11-06
  • 如何使用 document.write 功能动态包含脚本?
    如何使用 document.write 功能动态包含脚本?
    动态包含具有document.write功能的脚本问题:如何将带有变量src属性的脚本标签动态添加到网页中,特别是如果 src 包含 document.write 函数?背景:通常,在 HTML 头中添加具有特定 src 属性的脚本标记可以无缝工作。但是,当src属性中包含document.writ...
    编程 发布于2024-11-06
  • 为什么我在 Python 中收到“Bad magic number”导入错误?
    为什么我在 Python 中收到“Bad magic number”导入错误?
    Bad Magic Number:了解导入错误使用 Python 时,遇到“Bad magic number”ImportError 可能会令人沮丧。此错误表示 pyc 文件(Python 脚本的编译版本)已损坏,这会导致与 Python 解释器不兼容。理解幻数在 UNIX 中-type 系统中,文...
    编程 发布于2024-11-06
  • 如何测试 Go 中未导出的函数?
    如何测试 Go 中未导出的函数?
    从非测试 Go 文件中调用测试函数在 Go 中,不应从代码本身调用测试函数。相反,单元测试应该使用 go test 命令执行。黑白盒测试Go 支持两种类型的单元测试:黑盒和白盒.黑盒测试测试从包外部导出的函数,模拟外部包如何与其交互。白盒测试从包本身内部测试未导出的函数。Example考虑一个名为...
    编程 发布于2024-11-06
  • 如何优化 Matplotlib 绘图性能以提高速度和效率?
    如何优化 Matplotlib 绘图性能以提高速度和效率?
    提高 Matplotlib 绘图性能使用 Matplotlib 绘图有时会很慢,尤其是在处理复杂或动画图形时。了解这种缓慢背后的原因可以帮助您优化代码以获得更快的性能。瓶颈和 BlittingMatplotlib 绘图过程的主要瓶颈在于它对所有内容的重绘每次调用Fig.canvas.draw()。然...
    编程 发布于2024-11-06
  • 面试工具包:数组 - 滑动窗口。
    面试工具包:数组 - 滑动窗口。
    一切都与模式有关! 一旦你学会了这些模式,一切都开始变得更容易了!如果你像我一样,你可能不喜欢技术面试,我不怪你——面试可能很艰难。 数组问题是面试中最常见的问题。这些问题通常涉及使用自然数组: const arr = [1, 2, 3, 4, 5]; 还有字符串问题,本质上是字符...
    编程 发布于2024-11-06
  • 字符串常量池:为什么即使文字存在,“new”也会创建一个新的字符串对象?
    字符串常量池:为什么即使文字存在,“new”也会创建一个新的字符串对象?
    字符串常量池:深入检查Java 中的字符串常量池被池化以优化内存使用并提高性能。这意味着当遇到字符串文字时,编译器会检查字符串常量池中是否存在具有相同值的现有字符串对象。如果找到,引用将定向到现有对象,避免创建新对象。但是,当使用“new”运算符创建新的 String 对象时,会出现混乱,因为这似乎...
    编程 发布于2024-11-06
  • 如何在 PHP 中使用 array_push() 处理多维数组?
    如何在 PHP 中使用 array_push() 处理多维数组?
    使用 PHP 的 array_push 添加元素到多维数组使用多维数组可能会令人困惑,特别是在尝试添加新元素时。当任务是将存储在 $newdata 中的循环中的数据附加到给定 $md_array 内的子数组“recipe_type”和“cuisine”时,就会出现此问题。要实现此目的,您可以利用ar...
    编程 发布于2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3