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

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

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

什么是tsup

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

?? Install

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

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

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

快速上手

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

步驟 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開(kāi)發(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)過(guò)程的詳細(xì)內(nèi)容，更多關(guān)于tsup打包TypeScript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

TypeScript與JavaScript對(duì)比及打包工具比較

相關(guān)文章

簡(jiǎn)單三行代碼函數(shù)實(shí)現(xiàn)幾十行Typescript類型推導(dǎo)
這篇文章主要為大家介紹了簡(jiǎn)單三行代碼函數(shù)實(shí)現(xiàn)幾十行Typescript類型推導(dǎo)的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
typescript快速上手的進(jìn)階類型與技術(shù)
本文講述了typescript開(kāi)發(fā)的一些高級(jí)的類型與技術(shù)，算是對(duì)于基礎(chǔ)知識(shí)點(diǎn)的補(bǔ)充，具體內(nèi)容包括：比如元組、枚舉類、接口、泛型相關(guān)概念等。雖說(shuō)是進(jìn)階，但是內(nèi)容不算多也并不難理解。
2022-12-12
高級(jí)前端面試手寫(xiě)扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)Tree
這篇文章主要為大家介紹了高級(jí)前端面試手寫(xiě)扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)Tree示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
TypeScript交叉運(yùn)算的算法示例解析
這篇文章主要為大家介紹了TypeScript交叉運(yùn)算的算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
ThreeJS?入門(mén)如何渲染出第一個(gè)3D圖形
這篇文章主要為大家介紹了ThreeJS?入門(mén)之如何渲染出第一個(gè)3D圖形實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
TypeScript手寫(xiě)一個(gè)簡(jiǎn)單的eslint插件實(shí)例
這篇文章主要為大家介紹了TypeScript手寫(xiě)一個(gè)簡(jiǎn)單的eslint插件實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
TypeScript?泛型接口具體使用實(shí)戰(zhàn)
這篇文章主要為大家介紹了TypeScript?泛型接口具體使用實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-07-07
Nest框架中集成使用Swagger示例說(shuō)明
這篇文章主要為大家介紹了Nest框架中集成使用Swagger的示例說(shuō)明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
typescript在vue中的入門(mén)案例代碼demo
這篇文章主要介紹了typescript在vue中的入門(mén)案例代碼demo,使用技術(shù)棧vue2+typescript+scss入門(mén)練手項(xiàng)目，天氣預(yù)報(bào)demo，需要的朋友可以參考下。
2022-12-12