Bunchee，JS/TS 套件的捆綁器

我發現 t3-env 中使用 Bunchee 來捆綁他們的 core、nextjs、nuxt 套件。

邦奇

Bunchee 是一個零配置捆綁器，可以輕鬆捆綁 JS/TS 庫。它建立在 Rollup 和 SWC 之上，讓您可以專注於編寫程式碼並同時產生多個套件（CommonJS 或 ESModule）。

它使用 package.json 中的標準導出配置作為唯一的事實來源，並使用入口文件約定

匹配您的匯出並將它們建構成捆綁包。

快速開始

1. 在 TS 專案中安裝 Bunchee

使用以下指令安裝bunkee：

npm install - save-dev bunchee typescript

2.配置

您可以使用 Bunchee 使用下列指令自動設定 package.json：

# Use bunchee to prepare package.json configuration
npm exec bunchee - prepare

或者您可以手動設定package.json。以下配置是從文件中選取的範例。

{
 "files": ["dist"],
 "exports": {
 "import": {
 "types": "./dist/es/index.d.mts",
 "default": "./dist/es/index.mjs"
 },
 "require": {
 "types": "./dist/cjs/index.d.ts",
 "default": "./dist/cjs/index.js"
 }
 },
 "scripts": {
 "build": "bunchee"
 }
}

3.建構

在上面的設定步驟中，我們已經定義了建置腳本。您只需執行此腳本 - npm run build，index.ts 成為捆綁器的入口點並根據匯出物件產生輸出。

例如：src/index.ts 將符合匯出名稱「.」或唯一的主要出口。

在 core/package.json 匯出

下面的程式碼選自 t3-env/packages/core/package.json。

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

在 nextjs/package.json 中導出

下面的程式碼選自 t3-env/packages/nextjs/package.json

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

在 nuxt/package.json 中匯出

下面的程式碼選自 t3-env/packages/nuxt/package.json

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

關於我們：

在 Thinkthroo，我們研究大型開源專案並提供架構指南。我們開發了使用 Tailwind 建構的可重複使用元件，您可以在專案中使用它們。我們提供 Next.js、React 和 Node 開發服務。

與我們預約會面討論您的專案。

參考：

1. https://www.npmjs.com/package/bunchee

2. https://github.com/t3-oss/t3-env/blob/main/packages/core/package.json#L40

以上是Bunchee，JS/TS 套件的捆綁器的詳細內容。更多資訊請關注PHP中文網其他相關文章！