Loading... ### 来源 Tsup 是基于 esbuild 开发的一个新型打包工具（比 rollup 还新）。内置了 TypeScript 支持，零配置、开箱即用，帮助你高效创建现代 TypeScript/JavaScript 库 ### 特点 由于rollup打包比较慢，而且esbuild+SWC配置又很麻烦，我们可以先学习使用Tsup Tsup可以快速打包 typescript 库，无需任何配置，并且基于esbuild进行打包，打包 ts 文件速度毫秒级，方便又高效 ### 安装 在项目文件夹中使用命令行来安装Tsup [官网传送门][1] ```zsh # 使用npm npm i -D tsup # 使用pnpm pnpm i -D tsup # 使用yarn yarn i -D tsup ``` ### 创建并编写一个ts文件 在`src`目录下创建一个ts文件并写一些基本代码试试 ```ts function test(value: any) { console.log(value); } export default{ test } ``` ### 配置`package.json` 修改package.json的scripts 属性下添加如下的 `build` 和 `start` 命令 ```json "scripts": { "build": "tsup", "dev": "tsup -- --watch", }, ``` 使用tsup可以编译ts文件，使用--watch可以持续监听文件编译 ### 配置tsup配置文件 tsup的编译文件支持以下四种 - tsup.config.ts - tsup.config.js - tsup.config.cjs - tsup.config.json 这里我们使用.js就行了 创建并编译tsup.config.ts并编写以下代码 ```ts import { defineConfig } from 'tsup' export default defineConfig({ // 入口文件 或者可以使用 entryPoints 底层是 esbuild entry: ['src/index.ts'], // 打包类型 支持以下几种 'cjs' | 'esm' | 'iife' format: ["cjs", "esm"], // 生成类型文件 xxx.d.ts dts: true, // 代码分割 默认esm模式支持 如果cjs需要代码分割的话就需要配置为 true splitting: false, // sourcemap sourcemap: false, // 每次打包先删除dist clean: true, }); ``` ### 运行 使用`npm run build`编译ts文件 ![2023-12-06T12:09:11.png][2] 可以看到速度还是很快的，并且编译了js,mjs,d.ts文件,编译成es5代码了比配置esbuild要简单很多 js文件 ```js var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var src_exports = {}; __export(src_exports, { default: () => src_default }); module.exports = __toCommonJS(src_exports); function test(value) { console.log(value); } var src_default = { test }; ``` mjs文件 ```js // src/index.ts function test(value) { console.log(value); } var src_default = { test }; export { src_default as default }; ``` d.ts文件 ```ts declare function test(value: any): void; declare const _default: { test: typeof test; }; export { _default as default }; ``` 还是很方便的，下一篇讲esbuild+SWC的编译方法 [1]: https://github.com/egoist/tsup [2]: https://imaeg-1253448073.cos.ap-nanjing.myqcloud.com//usr/uploads/2023/12/2394853749.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDCHAnBIiDguteCYgZFhurZ2GF4ez5wgEZ%26q-sign-time%3D1732173514%3B1732174174%26q-key-time%3D1732173514%3B1732174174%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D9d9e134ed5915181434762d6b445e018721483a6& 最后修改：2024 年 06 月 26 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏