基于tsup打包TypeScript实现过程

目录
  • 什么是tsup
    • ⚙️ Install
    • 快速上手
    • 配置文件
    • 打包构建
    • 小彩蛋 安装失败~

什么是tsup

Tsup 可以快速打包 typescript 库，无需任何配置，并且基于esbuild进行打包，打包 ts 文件速度毫秒级，方便又高效。

⚙️ Install

在项目文件夹中本地安装它。官网传送门

npm i tsup -D
# Or Yarn
yarn add tsup --dev

Tsup也可以全局安装，但不建议这样做。

快速上手

tsup默认支持无配置打包，我们尝试一下。

  • 步骤 1: 创建并进入一个目录
mkdir tsup-study && cd tsup-study
  • 步骤 2: 创建package.json并且安装 tsup
# 生成 package.json
npm init -y
# 安装tsup
npm i tsup -D
  • 步骤 3: 根目录创建 src文件夹，并且创建index.ts
function print(value: any) {
    console.log(value);
}
export default{
    print
}
  • 步骤 4: 修改package.json
{
  "scripts": {
      "dev": "tsup src/index.ts"
  },
}
  • 步骤 5: 执行 npm run dev

  • 步骤 6: tsup支持一次性打包多个文件

配置文件

tsup目前支持以下几种配置文件类型

打包构建

  • 步骤 1: 修改package.json文件
"scripts": {
  "build": "tsup"
}
  • 步骤 2: 根目录新建tsup.config.ts文件，配置如下
import { defineConfig } from 'tsup'
export default defineConfig({
  // 入口文件 或者可以使用 entryPoints 底层是 esbuild
  entry: ['src/index.ts'],
  // 打包类型  支持以下几种 'cjs' | 'esm' | 'iife'
  format: ["cjs", "esm"],
  // 生成类型文件 xxx.d.ts
  dts: false,
  // 代码分割 默认esm模式支持 如果cjs需要代码分割的话就需要配置为 true
  splitting: false,
  // sourcemap
  sourcemap: false,
  // 每次打包先删除dist
  clean: true,
});
  • 步骤 3: 执行 npm run build会生成打包文件

小彩蛋 安装失败~

如果安装时报的错误和我是一致的话，就需要以下操作进行处理，失败的原因是tsup内集成了esbuild，它是由 Go开发的，而在mac电脑上 默认的版本需要大于10.12.6的版本

package.json文件中做以下修改

{
  "devDependencies": {
    "esbuild-wasm": "latest",// 第1 添加这一行代码
    "tsup": "^6.5.0"
  },
  "overrides": { // 第二行 添加这个
    "esbuild": "npm:esbuild-wasm@latest"
  }
}

以上就是基于tsup打包TypeScript实现过程的详细内容，更多关于tsup打包TypeScript的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • TypeScript与JavaScript对比及打包工具比较

    目录 TypeScript (TS) 和 JavaScript (JS) 对比: 性能详细说明: ts打包工具对比 ts-loader @rollup/plugin-typescrip swc swc在webpack或vite项目中使用 TypeScript (TS) 和 JavaScript (JS) 对比: 类型系统: TypeScript 是一种静态类型的语言,这意味着变量必须在声明时指定类型,这种类型信息在编译时会被检查,从而可以捕捉类型错误.相比之下,JavaScript 是一种动态类

  • 基于node打包可执行文件工具_Pkg使用心得分享

    基于node打包可执行文件工具_Pkg使用心得分享

    项目地址 这个项目很神奇,直接将node.js项目打包成windows可以直接执行的exe文件(也支持FreeBSD.linux.macos.arm系统),甚至不需要安装Node.js,且无须修改你项目中的任何代码! 首先安装pkg npm install -g pkg 然后在项目目录下执行 pkg entrance.js 即可打包linux,macos,win3个平台的可执行文件.entrance.js为你node项目的入口文件. 如果只想打包windows下的exe,则加上-t参数.win即

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • 基于vue-cli 打包时抽离项目相关配置文件详解

    前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需要对这些配置文件进行抽离,不让webpack把配置文件也进行编译. 首先,我们需要在/static 下面新建一个js文件作为配置文件 里面的内容如下: window.g={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:`http://10.200.199.84

  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • 基于python实现雪花算法过程详解

    基于python实现雪花算法过程详解

    这篇文章主要介绍了基于python实现雪花算法过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Snowflake是Twitter提出来的一个算法,其目的是生成一个64bit的整数: 1bit:一般是符号位,不做处理 41bit:用来记录时间戳,这里可以记录69年,如果设置好起始时间比如今年是2018年,那么可以用到2089年,到时候怎么办?要是这个系统能用69年,我相信这个系统早都重构了好多次了. 10bit:10bit用来记录机器ID

  • 基于python调用psutil模块过程解析

    这篇文章主要介绍了基于python调用psutils模块过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 用Python来编写脚本简化日常的运维工作是Python的一个重要用途.在Linux下,有许多系统命令可以让我们时刻监控系统运行的状态,如ps,top,free等等.要获取这些系统信息,Python可以通过subprocess模块调用并获取结果.但这样做显得很麻烦,尤其是要写很多解析代码. 在Python中获取系统信息的另一个好办法是

  • spring boot基于DRUID实现数据源监控过程解析

    这篇文章主要介绍了spring boot基于DRUID实现数据源监控过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 随着需求和技术的日益革新,spring boot框架是越来越流行,她也越来越多地出现在我们的项目中,当然最主要的原因还是因为spring boot构建项目实在是太爽了,构建方便,开发简单,而且效率高.今天我们并不是来专门学习spring boot项目的,我们要讲的是数据源的加密和监控,监控到好说,就是不监控也没什么问题,但

  • Spring基于xml文件配置Bean过程详解

    Spring基于xml文件配置Bean过程详解

    这篇文章主要介绍了spring基于xml文件配置Bean过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 通过全类名来配置: class:bean的全类名,通过反射的方式在IOC容器中创建Bean,所以要求bean中必须有一个无参的构造器. <bean id="helloWorld" class="com.gong.spring.beans.HelloWorld"> <property na

  • 基于springboot处理date参数过程解析

    这篇文章主要介绍了基于springboot处理date参数过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言 最近在后台开发中遇到了时间参数的坑,就单独把这个问题提出来找时间整理了一下: 正文 测试方法 bean代码: public class DateModelNoAnnotation { private Integer id; private Date receiveDate; } controller代码: @RestContr

  • 基于SPRINGBOOT配置文件占位符过程解析

    这篇文章主要介绍了基于SPRINGBOOT配置文件占位符过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.配置文件占位符 1.application.properties server.port=8088 debug=false product.id=ID:${random.uuid} product.name=da mao mao product.weight=${random.int} product.fristLinePrice

随机推荐