DEV Community

thinkThroo
thinkThroo

Posted on

Bunchee, a bundler for JS/TS package

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
 }
}
Enter fullscreen mode Exit fullscreen mode

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"
 }
},
Enter fullscreen mode Exit fullscreen mode

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"
 }
},
Enter fullscreen mode Exit fullscreen mode

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"
 }
},
Enter fullscreen mode Exit fullscreen mode

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.

Image description

Reference:

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

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

Top comments (0)