草庐IT

前端打包：tsup

涅槃快乐是金 2023-10-19 原文

使用 tsup 的目的是为了快速的打包 TS 项目，使用 tsup 基于 esbuild 进行构建，打包 ts 文件速度是 tsc 的 100 多倍

使用

安装
npm i tsup -D
配置文件

配置比较简单，看一下官方文档基本上就可以直接上手使用

目前支持了如下几种配置文件类型

tsup.config.ts
tsup.config.js
tsup.config.cjs
tsup.config.json

import type { Options } from "tsup";

export const tsup: Options = {
  entry: ["src/*.ts"],
  format: ["cjs", "esm"],
  dts: true,
  splitting: true,
  clean: true,
};
直接通过 script 脚本运行
"script": {
     "build": "tsup",
     "dev": "tsup --watch"
 }

在 dev 的情况下你可以进行打包并监听文件的改变进行打包，这样就可以快速看到效果了
如果需要打包多入口文件只需要这样：

tsup src/index.ts src/cli.ts

或者 src 下的所有 ts 文件作为打包入口

tsup src/*.ts

出口默认是 dist 文件夹，并且默认是符合 commonJS 的 cjs 格式，只需要通过 format 参数指定即可打包出 cjs,esm,iife 格式的文件，iife 比较适合浏览器通过<script>标签引入，如果没这个需求通常只需要打包出 cjs 和 esm 即可。

  • 这样打包出来的 js 文件并不会附带类型定义文件，如果需要带上类型定义文件只需要在打包命令加上：--dts 参数即可。
  • 如果打包时需要清除上一次的打包需要使用：--clean 参数。
  • 默认情况下打包 esm 会进行代码分割，但是 cjs 并不默认支持，如果需要启用 cjs 代码分割需要加上：--splitting 参数。
tsup前端codepre

有关前端打包：tsup的更多相关文章

  1. 关于Qt程序打包后运行库依赖的常见问题分析及解决方法 - 2

    目录一.大致如下常见问题：（1）找不到程序所依赖的Qt库version`Qt_5'notfound(requiredby（2）CouldnotLoadtheQtplatformplugin"xcb"in""eventhoughitwasfound（3）打包到在不同的linux系统下，或者打包到高版本的相同系统下，运行程序时，直接提示段错误即segmentationfault，或者Illegalinstruction(coredumped)非法指令（4）ldd应用程序或者库，查看运行所依赖的库时，直接报段错误二.问题逐个分析，得出解决方法：（1）找不到程序所依赖的Qt库version`Qt_5'

  2. ruby - 如何打包 Ruby 应用程序？ - 2

    我有一个使用Qt4绑定(bind)的Ruby应用程序。我希望能够打包并发布它。我查看了其他应用程序，例如rake和puppet，以了解它们是如何打包的。rake和puppet都被打包为gems。当我意识到rake和puppet都是更多的系统级工具而不是用户级应用程序时，我开始走这条路。我也看过orca，但它只是windows。除了gem或orca，是否还有其他选项可用于打包RubyGUI应用程序？我想要跨平台的东西。 最佳答案 看看platformgem规范。您可以为您的代码支持的每个平台打包一个gem。Somegemsconsis

  3. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  4. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  5. ruby - 打包的 Ruby 字符串中的奇怪行为 - 2

    我对某些ruby​​行为感到困惑。看下面的代码:[127].pack("C")=="\x7f"#=>true这是有道理的。现在:[128].pack("C")#=>"\x80""\x80"#=>"\x80"[128].pack("C")=="\x80"#=>falsepackoption"C"代表8-bitunsigned(unsignedchar)，应该可以存储128的值。两个字符串也打印相同的东西，那么为什么它们不相等呢？这与编码有关吗？我使用的是ruby​​2.0.0p247。 最佳答案 这是错误的，因为编码不同:[128].

  6. 前端实现文件上传（点击+拖拽） - 2

    一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器

  7. ruby - 如何为 Ubuntu 打包 Ruby 应用程序，包括它的 gem 依赖项？ - 2

    我有一个名为Maid的命令行实用程序我目前分发为aRubyGem.我还想将其作为.deb包分发tomakeiteasierforUbuntuuserstoinstall.现在，Ubuntu用户必须手动完成很多工作，尤其是对于不熟悉Ruby的人:sudoapt-getinstallrubysudoapt-getinstallrubygems#Makesure`ruby`and`gem`arein`$PATH`sudogeminstallmaidmaidversion#examplecommand理想情况下，我希望在全新的Ubuntu安装上安装一个命令:sudoapt-getinstall

  8. 教你如何使用vercel服务免费部署前端项目和serverless api - 2

    一、介绍一下vercelvercel是一个站点托管平台，提供CDN加速，同类的平台有Netlify和GithubPages，相比之下，vercel国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。但是vercel只是针对个人用户免费，teams是收费的首先vercel零配置部署，第二访问速度比github-page好很多，并且构建很快，还是免费使用的，对于部署个人前端项目路、接口服务非常方便vercel类似于git

  9. ruby - 访问打包到 Ruby Gem 中的文件 - 2

    我有一个Buildr扩展，我将其打包为一个gem。我有一组要添加到包中的脚本。目前，我将这些脚本存储为正在写入文件的大文本block。我更愿意拥有可以直接复制或读/写回的单个文件。我希望将这些文件打包到gem中。我在打包它们时没有问题(只需在rakeinstall之前将它们粘贴到文件系统中)但我不知道如何访问它们。是否有GemResources捆绑类型的东西？ 最佳答案 基本上有两种方式，1)您可以使用__FILE__在您的gem中加载与Ruby文件相关的资源:defpath_to_resourcesFile.join(File.d

  10. ruby - 使用 Ruby gem 打包只读数据文件 - 2

    我正在开发一个部署为gem的Ruby应用程序。我想在gem中包含一个只读数据文件，但我不确定应该如何/在哪里打包关于一些背景知识，此应用程序处理MIDI规范，其中包括数百个常量值。例如，Controller“ChannelVolume”始终由值7标识。“Sustain”由64等标识。过去，人们将这些值作为一大组常量包含在他们的代码中。这很好，但对我来说，将它们包含在与语言无关的格式(例如yaml)中似乎更合适使用GEM_PATH定位yaml文件很丑陋，而且在非gem部署中使用库时也不起作用。谢谢你的帮助 最佳答案 我认为RubyGe

随机推荐