Bunchee, a bundler for JS/TS package

I found that Bunchee is used in t3-env to bundle their core, nextjs, nuxt packages.

Bunchee

Bunchee is a zero configuration bundler makes bundling JS/TS library effortless. It’s built on top of Rollup and SWC, allowing you to focus on writing code and generating multiple bundles (CommonJS or ESModule) at the same time.

It uses the standard exports configuration in package.json as the only source of truth, and uses entry file conventions

to match your exports and build them into bundles.

Quick start

1. Install Bunchee in a TS project

Install bunchee using the below command:

npm install - save-dev bunchee typescript

2. Configuration

You can use Bunchee to configure the package.json automatically using the below command:

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

Or you can configure the package.json manually. The below configuration is an example picked from 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. Build

In the configuration step above, we have defined the build script. You just have to execute this script — npm run build, index.ts become the entry point for the bundler and generates the output based on the exports object.

For example: src/index.ts will match the exports name “.” or the only main export.

Exports in core/package.json

This below code is picked from 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"
 }
},

Exports in nextjs/package.json

This below code is picked from 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"
 }
},

Exports in nuxt/package.json

This below code is picked from 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"
 }
},

About us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed reusable Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to discuss your project.

Reference:

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

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

The above is the detailed content of Bunchee, a bundler for JS/TS package. For more information, please follow other related articles on the PHP Chinese website!