Tsup编译ts文件-一个由esbuild驱动的新型打包库

博主：罗拉
发布时间：2023 年 12 月 06 日
1134 次浏览
暂无评论
3188字数
分类：前端

### 来源
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%3D1737165849%3B1737166509%26q-key-time%3D1737165849%3B1737166509%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D22ee34b21d28d25b1fe9547e0c4e856fbc4b2df9&

本文标题： Tsup编译ts文件-一个由esbuild驱动的新型打包库

本文链接： https://luola.me/18.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

最后修改：2024 年 06 月 26 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Tsup编译ts文件-一个由esbuild驱动的新型打包库

罗拉 • 2023 年 12 月 06 日

// 生成类型文件 xxx.d.ts
  dts: true,

// 代码分割 默认esm模式支持 如果cjs需要代码分割的话就需要配置为 true
  splitting: false,

// sourcemap 
  sourcemap: false,

export { _default as default };
```
还是很方便的，下一篇讲esbuild+SWC的编译方法

Tsup编译ts文件-一个由esbuild驱动的新型打包库

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Nuxt3 useFetch封装最佳实践

记一次ArchLinux的安装和配置过程

ArchLinux配置和常用应用

Tsup编译ts文件-一个由esbuild驱动的新型打包库

浅谈ESbuild+SWC编译TS

eclipse和idea创建web项目

宝塔9.3无法保存证书报错TypeError: ECPrivateKey.sign() takes 2 positional arguments but 3 were given

关于JetBrain全家桶24.2.x反复跳激活的解决方案

Maven初始settings.xml阿里云镜像站设置

解决WSL2报错（请启用虚拟机平台 Windows 功能并确保在 BIOS 中启用虚拟化

Tsup编译ts文件-一个由esbuild驱动的新型打包库

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Tsup编译ts文件-一个由esbuild驱动的新型打包库

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款