Bunchee, un bundler pour le package JS/TS

J'ai trouvé que Bunchee est utilisé dans t3-env pour regrouper leurs packages core, nextjs, nuxt.

Bunchee

Bunchee est un bundler sans configuration qui facilite le regroupement de la bibliothèque JS/TS. Il est construit sur Rollup et SWC, vous permettant de vous concentrer sur l'écriture de code et la génération de plusieurs bundles (CommonJS ou ESModule) en même temps.

Il utilise la configuration d'exportation standard dans package.json comme seule source de vérité et utilise les conventions de fichiers d'entrée

pour faire correspondre vos exportations et les regrouper en lots.

Démarrage rapide

1. Installer Bunchee dans un projet TS

Installez Buntee à l'aide de la commande ci-dessous :

npm install - save-dev bunchee typescript

2. Configuration

Vous pouvez utiliser Bunchee pour configurer automatiquement le package.json à l'aide de la commande ci-dessous :

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

Ou vous pouvez configurer le package.json manuellement. La configuration ci-dessous est un exemple tiré de la documentation.

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

Dans l'étape de configuration ci-dessus, nous avons défini le script de build. Il vous suffit d'exécuter ce script — npm run build, index.ts devient le point d'entrée du bundler et génère la sortie basée sur l'objet exports.

Par exemple : src/index.ts correspondra au nom des exportations « ». ou la seule exportation principale.

Exportations dans core/package.json

Ce code ci-dessous est extrait de 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"
 }
},

Exportations dans nextjs/package.json

Ce code ci-dessous est extrait de 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"
 }
},

Exportations dans nuxt/package.json

Ce code ci-dessous est extrait de 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"
 }
},

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants réutilisables, construits avec tailwind, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Référence :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!