thinkThrooI 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
- 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.
