来源

Tsup 是基于 esbuild 开发的一个新型打包工具（比 rollup 还新）。内置了 TypeScript 支持，零配置、开箱即用，帮助你高效创建现代 TypeScript/JavaScript 库

特点

由于rollup打包比较慢，而且esbuild+SWC配置又很麻烦，我们可以先学习使用Tsup Tsup可以快速打包 typescript 库，无需任何配置，并且基于esbuild进行打包，打包 ts 文件速度毫秒级，方便又高效

安装

在项目文件夹中使用命令行来安装Tsup 官网传送门

Zsh
# 使用npm
npm i -D tsup
# 使用pnpm
pnpm i -D tsup
# 使用yarn
yarn i -D tsup

创建并编写一个ts文件

在src目录下创建一个ts文件并写一些基本代码试试

TypeScript
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并编写以下代码
TypeScript
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 可以看到速度还是很快的，并且编译了js,mjs,d.ts文件,编译成es5代码了比配置esbuild要简单很多 js文件

JavaScript
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文件

JavaScript
// src/index.ts
function test(value) {
  console.log(value);
}
var src_default = {
  test
};
export {
  src_default as default
};

d.ts文件

TypeScript
declare function test(value: any): void;
declare const _default: {
    test: typeof test;
};

export { _default as default };

还是很方便的，下一篇讲esbuild+SWC的编译方法