首頁 > web前端 > js教程 > Bunchee,JS/TS 套件的捆綁器

Bunchee,JS/TS 套件的捆綁器

Linda Hamilton
發布: 2024-11-09 05:32:02
原創
712 人瀏覽過

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

Bunchee, a bundler for JS/TS package

邦奇

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

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

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

快速開始

  1. 在 TS 專案中安裝 Bunchee

使用以下指令安裝bunkee:

1

npm install - save-dev bunchee typescript

登入後複製

2.配置

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

1

2

# Use bunchee to prepare package.json configuration

npm exec bunchee - prepare

登入後複製

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

 "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。

1

2

3

4

5

6

7

8

9

10

11

"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

1

2

3

4

5

6

7

8

9

10

11

"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

1

2

3

4

5

6

7

8

9

10

11

"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 開發服務。

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

Bunchee, a bundler for JS/TS package

參考:

  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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板