基于tsup打包TypeScript實(shí)現(xiàn)過程

更新時(shí)間：2022年12月21日 11:42:35 作者：云層上的光

這篇文章主要為大家介紹了基于tsup打包TypeScript實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

什么是tsup

Tsup 可以快速打包 typescript 庫(kù)，無需任何配置，并且基于esbuild進(jìn)行打包，打包 ts 文件速度毫秒級(jí)，方便又高效。

?? Install

在項(xiàng)目文件夾中本地安裝它。官網(wǎng)傳送門

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

Tsup也可以全局安裝，但不建議這樣做。

快速上手

tsup默認(rèn)支持無配置打包，我們嘗試一下。

步驟 1: 創(chuàng)建并進(jìn)入一個(gè)目錄

mkdir tsup-study && cd tsup-study

步驟 2: 創(chuàng)建package.json并且安裝 tsup

# 生成 package.json
npm init -y
# 安裝tsup
npm i tsup -D

步驟 3: 根目錄創(chuàng)建 src文件夾，并且創(chuàng)建index.ts

function print(value: any) {
    console.log(value);
}
export default{
    print
}

步驟 4: 修改package.json

{
  "scripts": {
      "dev": "tsup src/index.ts"
  },
}

步驟 5: 執(zhí)行 npm run dev

步驟 6: tsup支持一次性打包多個(gè)文件

配置文件

tsup目前支持以下幾種配置文件類型

打包構(gòu)建

步驟 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,
  // 代碼分割 默認(rèn)esm模式支持 如果cjs需要代碼分割的話就需要配置為 true
  splitting: false,
  // sourcemap 
  sourcemap: false,
  // 每次打包先刪除dist
  clean: true,
});

步驟 3: 執(zhí)行 npm run build會(huì)生成打包文件

小彩蛋安裝失敗~

如果安裝時(shí)報(bào)的錯(cuò)誤和我是一致的話，就需要以下操作進(jìn)行處理，失敗的原因是tsup內(nèi)集成了esbuild，它是由 Go開發(fā)的，而在mac電腦上默認(rèn)的版本需要大于10.12.6的版本

package.json文件中做以下修改

{
  "devDependencies": {
    "esbuild-wasm": "latest",// 第1 添加這一行代碼
    "tsup": "^6.5.0"
  },
  "overrides": { // 第二行 添加這個(gè)
    "esbuild": "npm:esbuild-wasm@latest"
  }
}

以上就是基于tsup打包TypeScript實(shí)現(xiàn)過程的詳細(xì)內(nèi)容，更多關(guān)于tsup打包TypeScript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: