一文学会 ts 构建工具 —— tsup

在这里插入图片描述

文章目录

  • 能打包什么?
  • 安装
  • 用法
    • 自定义配置文件
    • 条件配置
    • 在 package.json 中配置
    • 多入口打包
    • 生成类型声明文件
    • sourcemap
    • 生成格式
    • 自定义输出文件
    • 代码分割
    • 产物目标环境
    • 支持 es5
    • 编译的环境变量
    • 对开发命令行工具友好
    • 监听模式 watch
    • 提供成功构建的钩子 onSuccess
    • 压缩产物 minify
    • 自定义 loader
    • Tree shaking
    • 类型检查
    • 支持 CSS (实验性功能)
    • 元数据文件 metafile
    • 自定义 esbuild 插件和配置
    • 注入 cjs 和 esm shims (垫片)
    • 复制文件到输出目录
    • 在项目中使用 tsup
  • 常见问题
    • error: No matching export in "xxx.ts" for import "xxx"

tsup

Bundle your TypeScript library with no config, powered by esbuild.

tsup 号称不用配置文件,打包 ts 库。底层为 esbuild。tsup 这么宣传,说明它肯定做了很多预设封装,不需要太多配置,开箱即用。

rollup 已经是牛夫人了。

能打包什么?

node.js 支持的都能打包,.js, .json, .mjs.。加上 ts 相关的 .ts, .tsx。

安装

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

用法

tsup [...files]

默认打包到 ./dist
能自动排除 node_modules 。
默认打包为 es5,CommonJS,

eg:

tsup src/index.ts src/cli.ts

生成 dist/index.js 和 dist/cli.js

自定义配置文件

可选的文件:

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

–config 配置项可指定配置文件。

import { defineConfig } from 'tsup'export default defineConfig({entry: ['src/index.ts'],splitting: false,sourcemap: true,clean: true,
})

条件配置

导出一个函数,tsup cli 会执行这个函数。

import { defineConfig } from 'tsup'export default defineConfig((options) => {return {minify: !options.watch,}
})

在 package.json 中配置

{"tsup": {"entry": ["src/index.ts"],"splitting": false,"sourcemap": true,"clean": true},"scripts": {"build": "tsup"}
}

多入口打包

export default defineConfig({// Outputs `dist/a.js` and `dist/b.js`.entry: ['src/a.ts', 'src/b.ts'],// Outputs `dist/foo.js` and `dist/bar.js`entry: {foo: 'src/a.ts',bar: 'src/b.ts',},
})

生成类型声明文件

tsup index.ts --dts

sourcemap

tsup index.ts --sourcemap

生成格式

支持 esm,cjs (默认) 和 iife。

tsup src/index.ts --format esm,cjs,iife
dist
├── index.mjs         # esm
├── index.global.js   # iife
└── index.js          # cjs

如果 package.json 的 type 字段为 module。命名会变成:

dist
├── index.js          # esm
├── index.global.js   # iife
└── index.cjs         # cjs

自定义输出文件

export default defineConfig({outExtension({ format }) {return {js: `.${format}.js`,}},
})

代码分割

默认支持 esm ,并且默认开启。CJS 需要 --splitting 手动开启。

产物目标环境

target 选项配置构建产物的目标环境,默认是 node16。

可支持:

  • chrome
  • edge
  • firefox
  • hermes
  • ie
  • ios
  • node
  • opera
  • rhino
  • safari

target 也可以指定 js 版本,比如 es2020,es5。

支持 es5

esbuild 是不支持 es5 的。tsup 是怎么做到的?

tsup 会先打包成 es2020,然后通过 SWC 转成 es5。

编译的环境变量

tsup src/index.ts --env.NODE_ENV production

对开发命令行工具友好

当入口文件如 src/cli.ts 包含 hashbang(即 #!/bin/env node)时,tsup 会自动使输出文件可执行,因此您无需运行 chmod +x dist/cli.js 来手动设置可执行权限。

监听模式 watch

tsup src/index.ts --watch

可选择忽视监听的文件:

tsup src src/index.ts --watch --ignore-watch folder1 --ignore-watch folder2

提供成功构建的钩子 onSuccess

这在监听模式下非常有用。

import { defineConfig } from 'tsup'export default defineConfig({async onSuccess() {// Start some long running task// Like a serverconst server = http.createServer((req, res) => {res.end('Hello World!')})server.listen(3000)return () => {server.close()}},
})

压缩产物 minify

tsup src/index.ts --minify

默认是用 esbuild 压缩,也可以用 terser 代替。前提必须安装 terser。

npm install -D tersertsup src/index.ts --minify terser

在 tsup.config.js 中,您可以传递 terserOptions,这些选项将原封不动地传递给 terser.minify。

自定义 loader

esbuild 提供这些 loader:

type Loader =| 'js'| 'jsx'| 'ts'| 'tsx'| 'css'| 'json'| 'text'| 'base64'| 'file'| 'dataurl'| 'binary'| 'copy'| 'default'

会发现上面没有图片的 loader,但我们可以指定 loader 去处理某些后缀的图片。

import { defineConfig } from 'tsup'export default defineConfig({loader: {'.jpg': 'base64', '.webp': 'file',},
})

Tree shaking

esbuild 默认开启了 tree shaking。但它的 tree shaking 可能有问题,所以 tsup 允许你选择 rollup 的 tree shaking 去替代 esbuild。

import { defineConfig } from 'tsup'export default defineConfig({treeshake: true, // 使用 rollup tree shaking
}

类型检查

esbuild 之所以快,就是因为它不会执行 ts 类型检查。你应该依靠 IDE 在完成类型检查。
如果你就想在构建时,执行类型检查,可以开启 --dts。
它会生成类型声明文件,自然也会进行类型检查。

支持 CSS (实验性功能)

元数据文件 metafile

传递 --metafile 标志,告诉 esbuild 以 JSON 格式生成一些关于构建的元数据。您可以将输出文件提供给像 bundle buddy 这样的分析工具,以可视化您的包中的模块以及每个模块占用多少空间。

生成的文件格式为:metafile-{format}.json。eg:metafile-cjs.json

自定义 esbuild 插件和配置

import { defineConfig } from 'tsup'export default defineConfig({esbuildPlugins: [YourPlugin],esbuildOptions(options, context) {options.define.foo = '"bar"'},
})

注入 cjs 和 esm shims (垫片)

shims 本意为垫片,类似于补丁的意思

启用此选项将在构建 esm/cjs 项目时填充一些代码以使其工作。

例如 __dirname 仅在 cjs 模块中可用,而 import.meta.url 仅在 esm 模块中可用。打完补丁后,esm 中就也能用 __dirname 了。

import { defineConfig } from 'tsup'export default defineConfig({shims: true,
})

打的补丁具体是什么样的?

CJS 项目会添加如下代码:

// import.meta.url:
(import.meta.url as typeof document) === "undefined"? new URL("file:" + __filename).href: (document.currentScript && document.currentScript.src) || new URL("main.js", document.baseURI).href;

esm 项目会添加如下代码:

// __dirname
path.dirname(fileURLToPath(import.meta.url))

vite 早期配置中就得使用这段代码。现在可以直接使用 __diranme 了。看来也是把这段代码作为了补丁,默认提供。

复制文件到输出目录

使用 --publicDir 将 ./public 文件夹内的文件复制到输出目录。
您还可以使用 --publicDir [dir] 来选择一个自定义目录。

在项目中使用 tsup

tsup 提供了 js API,可以在 js 中使用。

import { build } from 'tsup'await build({entry: ['src/index.ts'],sourcemap: true,dts: true,
})

常见问题

error: No matching export in “xxx.ts” for import “xxx”

当您在 tsconfig 中启用了emitDecoratorMetadata时,通常会发生这种情况。
在这种模式下,我们使用 SWC 将装饰器转换为 JavaScript,因此导出的类型将被消除,这就是为什么 esbuild 无法找到相应的导出。
您可以通过将 import 语句从 import {SomeType}更改为import {type SomeType}import type {SomeType}来修复此问题。

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

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

相关文章

史上最全的四分之一、半车再到全车7自由度常规悬架建模与仿真之一

一、悬架建模的简化过程 汽车是一个复杂的振动系统,针对不同的需求进行不同的简化。在对悬架振动分析中,把汽车车身看做一个刚体,把驾驶员座椅和驾驶员拿掉;车身以下至车轮之间的橡胶垫,连接杆,弹簧等具有…

Veritas Backup Exec 23.0 (Windows) - 面向中小型企业的数据备份和恢复

Veritas Backup Exec 23.0 (Windows) - 面向中小型企业的数据备份和恢复 请访问原文链接:Veritas Backup Exec 23.0 (Windows) - 面向中小型企业的数据备份和恢复,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org Ba…

线性代数基础2矩阵

矩阵是什么 矩阵就是二维数组,下面是一个 m 乘 n 的矩阵,它有 m 行,n 列,每行每列上面都有元素,每个元素都有行标i 和列标 j, a ij 。简称m n矩阵,记作: 注意a11的索引是 A[0,0]。…

leetcode:438. 找到字符串中所有字母异位词

给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串(包括相同的字符串)。 示例 1: 输入: s "cbaebabacd", p "…

使用Python爬取易车网汽车信息(含x-sign参数逆向分析)

文章目录 1. 写在前面2. 接口分析3. 断点分析3. 算法还原 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致…

Java如何实现List的反转

hi,我是程序员王也,一个资深Java开发工程师,平时十分热衷于技术副业变现和各种搞钱项目的程序员~,如果你也是,可以一起交流交流。 今天我们来聊聊Java中实现List反转~ List反转的基本概念 在Java中,反转一…

RK3568 学习笔记 : u-boot 通过 tftp 网络更新 u-boot自身

前言 开发板型号: 【正点原子】 的 RK3568 开发板 AtomPi-CA1 使用 虚拟机 ubuntu 20.04 收到单独 编译 RK3568 u-boot 使用 rockchip Linux 内核的设备树 【替换】 u-boot 下的 rk3568 开发板设备树文件,解决 u-boot 下千兆网卡设备能识别但是无法 Pi…

B树(B-tree)

B树(B-tree) B树(B-tree)是一种自平衡的多路查找树,主要用于磁盘或其他直接存取的辅助存储设备 B树能够保持数据有序,并允许在对数时间内完成查找、插入及删除等操作 这种数据结构常被应用在数据库和文件系统的实现上 B树的特点包括: B树为…

AD设置覆铜与板子边缘间隔

1、设置板子边缘与覆铜间隔原因 在单个制板或者批量制板时,有时由于机器切割不稳定,造成切到覆铜,板子容易不稳定。为了保证机器切割不切到覆铜,我们可以设置覆铜到板子边缘的间隔。 2、设置方式 打开Design--->Rules&#…

pycharm创建的项目

pycharm生成django templates删出 settings.py

Vue 指令、计算属性、侦听器

目录 指令 指令修饰符 按键修饰符 ​编辑 v-model修饰符 事件修饰符 v-bind对于样式操作的增强 操作class 对象 数组 操作style v-model应用于其他表单元素 computed计算属性 概念 基础语法 ​编辑 计算属性vs方法 computed计算属性 作用 语法 缓存特性 m…

Java Web 网页设计

不要让追求之舟停泊在幻想的港湾 而应扬起奋斗的风帆 驶向现实生活的大海 网页设计 1.首先 添加框架支持 找到目录右键添加 找到Web Application选中 点击OK 然后 编辑设置 找到Tomcat--local 选中 点击OK 名称可以自己设置 找到对应文件夹路径 把Tomcat添加到项目里面 因为…