Rumah >hujung hadapan web >tutorial js >Bunchee, pengikat untuk pakej JS/TS
Saya mendapati bahawa Bunchee digunakan dalam t3-env untuk menggabungkan pakej teras, nextjs, nuxt mereka.
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.
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.
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" } },
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" } },
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" } },
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.
https://www.npmjs.com/package/bunchee
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!