Rumah >hujung hadapan web >tutorial js >Bunchee, pengikat untuk pakej JS/TS

Bunchee, pengikat untuk pakej JS/TS

Linda Hamilton
Linda Hamiltonasal
2024-11-09 05:32:02656semak imbas

Saya mendapati bahawa Bunchee digunakan dalam t3-env untuk menggabungkan pakej teras, nextjs, nuxt mereka.

Bunchee, a bundler for JS/TS package

Bunchee

Bunchee ialah pengikat konfigurasi sifar menjadikan penggabungan perpustakaan JS/TS menjadi mudah. Ia dibina di atas Rollup dan SWC, membolehkan anda menumpukan pada menulis kod dan menjana berbilang berkas (CommonJS atau ESModule) pada masa yang sama.

Ia menggunakan konfigurasi eksport standard dalam package.json sebagai satu-satunya sumber kebenaran dan menggunakan konvensyen fail kemasukan

untuk memadankan eksport anda dan membinanya menjadi berkas.

Permulaan pantas

  1. Pasang Bunchee dalam projek TS

Pasang bunchee menggunakan arahan di bawah:

npm install - save-dev bunchee typescript

2. Konfigurasi

Anda boleh menggunakan Bunchee untuk mengkonfigurasi package.json secara automatik menggunakan arahan di bawah:

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

Atau anda boleh mengkonfigurasi package.json secara manual. Konfigurasi di bawah ialah contoh yang dipilih daripada dokumentasi.

{
 "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. Bina

Dalam langkah konfigurasi di atas, kami telah menentukan skrip binaan. Anda hanya perlu melaksanakan skrip ini — npm run build, index.ts menjadi titik masuk untuk bundler dan menjana output berdasarkan objek eksport.

Contohnya: src/index.ts akan sepadan dengan nama eksport "." atau satu-satunya eksport utama.

Eksport dalam core/package.json

Kod di bawah ini dipilih daripada 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"
 }
},

Eksport dalam nextjs/package.json

Kod di bawah ini dipilih daripada 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"
 }
},

Eksport dalam nuxt/package.json

Kod di bawah ini dipilih daripada 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"
 }
},

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen boleh guna semula, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Bunchee, a bundler for JS/TS package

Rujukan:

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

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

Atas ialah kandungan terperinci Bunchee, pengikat untuk pakej JS/TS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn