Bunchee, ein Bundler für JS/TS-Pakete

Ich habe herausgefunden, dass Bunchee in t3-env verwendet wird, um ihre Core-, NextJS- und Nuxt-Pakete zu bündeln.

Bunchee

Bunchee ist ein Zero-Configuration-Bundler, der die Bündelung von JS/TS-Bibliotheken mühelos macht. Es basiert auf Rollup und SWC, sodass Sie sich auf das Schreiben von Code und das gleichzeitige Generieren mehrerer Bundles (CommonJS oder ESModule) konzentrieren können.

Es verwendet die Standard-Exportkonfiguration in package.json als einzige Quelle der Wahrheit und verwendet Eintragsdateikonventionen

um Ihre Exporte anzupassen und sie in Paketen zusammenzustellen.

Schnellstart

1. Installieren Sie Bunchee in einem TS-Projekt

Installieren Sie Bunchee mit dem folgenden Befehl:

npm install - save-dev bunchee typescript

2. Konfiguration

Sie können Bunchee verwenden, um package.json automatisch mit dem folgenden Befehl zu konfigurieren:

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

Oder Sie können die package.json manuell konfigurieren. Die folgende Konfiguration ist ein Beispiel aus der Dokumentation.

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

Im obigen Konfigurationsschritt haben wir das Build-Skript definiert. Sie müssen nur dieses Skript ausführen – npm run build, index.ts wird zum Einstiegspunkt für den Bundler und generiert die Ausgabe basierend auf dem Exportobjekt.

Zum Beispiel: src/index.ts entspricht dem Exportnamen „.“ oder der einzige Hauptexport.

Exporte in core/package.json

Der folgende Code stammt aus 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"
 }
},

Exporte in nextjs/package.json

Der folgende Code stammt aus 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"
 }
},

Exporte in nuxt/package.json

Der folgende Code stammt aus 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"
 }
},

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind wiederverwendbare Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenz:

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

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

Das obige ist der detaillierte Inhalt vonBunchee, ein Bundler für JS/TS-Pakete. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!