• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Perfect build tool for libraries, powered by esbuild

nanobundle

Version on NPM Downlaods on NPM Integration codecov LICENSE - MIT All Contributors

Perfect build tool for libraries, powered by esbuild

Features

  • Automatic entry points
  • Support for ESM and CommonJS
  • Support TypeScript NodeNext moduleResolution
  • Support multple & complex entries by Node.js's Conditional Exports
  • Support Import Maps with Node.js's Subpath Imports rule
  • Optimize esbuild options to maximize concurrency
  • Only configuration you need is package.json (and optionally tsconfig.json)

See feature comparison for more detail.

Usage

You don't need any config files or passing the entry paths. But only you need to have proper package.json (and tsconfig.json)

{
  "main": "./lib/index.js",
  "scripts": {
    "build": "nanobundle build"
  }
}

That's it, then just run yarn build or npm run build. What a magic โœจ

nanobundle is smart enough to automatically determine the location of the appropriate source files from the entries specified in your package.json.

It searches based on the --root-dir and --out-dir on the CLI flags (defaults to src and lib) but respects tsconfig.json if present.

package.json Recipes

More interestingly, it supports all of Node.js' notoriously complex Conditional Exports rules.

The ESM-only approach
{
  "type": "module",
  "main": "./lib/index.js",    // => src/index.ts
  "module": "./lib/index.js",  // => src/index.ts
  "exports": "./lib/index.js"  // => src/index.ts
}
Dual-package exports
{
  "exports": {
    ".": {
      "types": "./lib/index.d.ts",     // => src/index.ts
      "require": "./lib/index.js",     // => src/index.ts
      "import": "./lib/index.mjs"      // => src/index.mts or src/index.ts
    },
    "./package.json": "./package.json" // => package.json
  }
}
Mutliple platform support
{
  "exports": {
    ".": {
      "node": {
        "require": "./lib/index.node.cjs",  // => src/index.cts or src/index.ts
        "import": "./lib/index.node.mjs"    // => src/index.mts or src/index.ts
      },
      "deno": "./lib/index.deno.mjs",       // => src/index.mts or src/index.ts
      "browser": "./lib/index.browser.mjs", // => src/index.mts or src/index.ts
      "default": "./lib/index.js"           // => src/index.ts
    },
    "./package.json": "./package.json"      // => package.json
  }
}
Server/Client submodules
{
  "exports": {
    ".": "./lib/common.js",          // => src/common.ts
    "./server": {
      "types": "./lib/server.d.ts",  // => src/server.ts
      "require": "./lib/server.cjs", // => src/server.cts or src/server.ts
      "import": "./lib/server.mjs"   // => src/server.mts or src/server.ts
    },
    "./client": {
      "types": "./lib/client.d.ts",      // => src/client.ts
      "require": "./lib/client.min.cjs", // => src/client.cts or src/client.ts, output will be minified:sparkles:
      "import": "./lib/client.min.mjs"   // => src/client.mts or src/client.ts, output will be minified
    },
    "./package.json": "./package.json"
  }
}
Development-only code for debugging
{
  "exports": {
    "development": "./dev.js",     // => src/dev.ts
    "production": "./index.min.js" // => src/index.ts, output will be minified
  }
}

CLI Options

Full CLI options
Usage
  $ nanobundle <command> [options]

Available Commands
  build    Build once and exit
  clean    Remove outputs

Options
  --version            Display current version

  --cwd                Use an alternative working directory
  
  --clean              Clean outputs before build

  --tsconfig           Specify the path to a custom tsconfig.json

  --import-maps        Specify import map file path (default: package.json)

  --root-dir           Specify the path to resolve source entry (default: ./src)
                       This also can be configured by tsconfig.json

  --out-dir            Specify the path to resolve source entry (default: ./lib)
                       This also can be configured by tsconfig.json

  --platform           Specify bundle target platform (default: "netural")
                       One of "netural", "browser", "node" is allowed

  --standalone         Embed external dependencies into the bundle (default: false)

  --external           Specify external dependencies to exclude from the bundle

  --jsx                Specify JSX mode. One of "transform", "preserve", "automatic" is allowed
                       This also can be configufeature comparisonred by tsconfig.json

  --jsx-factory        Specify JSX factory (default: "React.createElement")
                       This also can be configured by tsconfig.json

  --jsx-fragment       Specify JSX <Fragment> factory (default: "Fragment")
                       This also can be configured by tsconfig.json

  --jsx-import-source  Specify JSX import source (default: "react")
                       This also can be configured by tsconfig.json

  --no-sourcemap       Disable source map generation

  --no-legal-comments  Disable legal comments generation

  --no-bundle          Disable ESBuild bundle and other files build

  --no-dts             Disable TypeScript .d.ts build

  --verbose            Set to report build result more verbosely

  --help               Display this message

Features

Nanobundle believes the package.json today is expressive enough for most module use cases.

So attempting to turn users' attention back to the Node's package spec like ES Modules and Import Maps which are already supported by Node.js, rather than adding another customizing options.

Automatic entry points

You don't need to pass or set entry points in any configuration file, only you have to do is provide correct exports in your package.json.

nanobundle will automatically search for entry files in the rootDir and outDir you have. (defaults are src and lib, or respectively configurable by tsconfig.json or CLI arguments)

{
  "main": "./lib/index.js",         // => search src/index.cts, src/index.ts, etc
  "module": "./lib/index.mjs",      // => search src/index.mts, src/index.ts, etc
  "exports": {
    "./feature": "./lib/feature.js" // => search src/feature.cts, src/feature.ts, etc
  }
}

Build targets

nanobundle expects you to write a Web-compatible(netural) package.

If you use any Node.js APIs, you need to tell it explicitly via:.

  • Pass --platform=node flag
  • Set the entry point with node condition.

Without engines field in package.json, the default Node.js version will be v14.

Conditional Exports

You can specify multiple/conditional entry points in your package.json.

See Node.js docs for more detail.

{
  "type": "module",
  "main": "./main.js", // Legacy entry
  "exports": {
    ".": "./main.js",
    "./feature": {
      "node": "./feature-node.js", // conditional entry
      "default": "./feature.js"
    }
  }
}

You can use conditional exports for dealing with Dual Package Hazard.

E.g. for supporting both CommonJS and ESM package.

{
  "exports": {
    "require": "./lib/index.cjs",
    "import": "./lib/index.mjs"
  }
}

Import Maps

nanobundle supports Import Maps

You can specify import alias by your package.json, or by a separated json file with the --import-map option.

{
  "imports": {
    "~/": "./",
    "@util/": "./src/utils/",
  }
}

nanobundle also handles Node.js's Subpath Imports rules.

{
  "imports": {
    "#dep": {
      "node": "dep-node-native",
      "default": "./dep-polyfill.js"
    }
  }
}

Embedding dependencies

nanobundle by default does nothing about external like dependencies and peerDependencies.

However, if the --standalone flag is set, it will try to embed all external dependencies into the bundle.

Dependencies specified with --external and Node.js internal APIs are always excluded.

TypeScript

Given a tsconfig.json file in the cwd or --tsconfig option, nanobundle looks for options for TypeScript and JSX.

nanobundle automatically generate TypeScript declaration as you specify types entries in the package.json, or you can disable it passing --no-dts flag.

Minification

Any entires with .min.(c|m)?js will generate minified output.

{
  "exports": "./index.min.js"  // will be minifies output
}

Using process.env.NODE_ENV with condition

Conditional entries with Node.js community condition production or development will be built with injected process.env.NODE_ENV as its value.

{
  "exports": {
    ".": {
      "development": "./dev.js",     // process.env.NODE_ENV === 'development'
      "production": "./prod.min.js"  // process.env.NODE_ENV === 'production'
    }
  }
}

Feature Comparison

Build tool 0 Config Respect package.json TypeScript .d.ts generation Concurrency Multiple Entries Conditional Exports Import Maps CSS Support Plugins Dev(watch) mode
nanobundle โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ
(planned)
โœ–๏ธ
(planned)
microbundle โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ ๐ŸŸก
(only flat)
โœ–๏ธ โœ”๏ธ โœ–๏ธ โœ”๏ธ
tsup ๐ŸŸก
(mostly by custom file)
โœ–๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ ๐ŸŸก
(with plugin)
๐ŸŸก
(experimental)
โœ”๏ธ โœ”๏ธ
estrella โœ–๏ธ โœ–๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ โœ–๏ธ โœ–๏ธ โœ–๏ธ โœ–๏ธ โœ”๏ธ
esbuild โœ–๏ธ โœ–๏ธ โœ–๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ โœ–๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ
Rollup โœ–๏ธ โœ–๏ธ ๐ŸŸก
(with plugin)
โœ”๏ธ โœ”๏ธ ๐ŸŸก
(by code)
๐ŸŸก
(with plugin)
โœ”๏ธ โœ”๏ธ โœ”๏ธ
Vite (lib mode) โœ–๏ธ โœ–๏ธ ๐ŸŸก
(with plugin)
โœ”๏ธ โœ”๏ธ ๐ŸŸก
(by code)
๐ŸŸก
(with plugin)
โœ”๏ธ โœ”๏ธ โœ”๏ธ
Parcel (lib mode) โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ”๏ธ โœ–๏ธ โœ–๏ธ โœ–๏ธ โœ”๏ธ โœ–๏ธ โœ”๏ธ

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

Hyeseong Kim
Hyeseong Kim

๐Ÿ’ป ๐Ÿšง
Anton Petrov
Anton Petrov

๐Ÿ’ป
jinho park
jinho park

โš ๏ธ ๐Ÿ›
Manuel Thalmann
Manuel Thalmann

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

More Repositories

1

gatsby-plugin-typegen

Let's give developers using GatsbyJS better DX with extreme type-safety
TypeScript
205
star
2

rescript-ink

ReScript bindings for Ink
ReScript
61
star
3

gatsby-plugin-linaria

Gatsby plugin for styling with Linaria
TypeScript
57
star
4

cometjs

cometkim's collection of frequently used JavaScript/TypeScript utilities.
TypeScript
57
star
5

turbocache

Cloudflare Workers as a custom remote cache for Turborepo
TypeScript
45
star
6

asdf-bun

asdf-vm plugin for installing Bun
Shell
41
star
7

rescript-vitest

ReScript bindings to Vitest
ReScript
36
star
8

react-hot-reload.macro

Zero configuration ๐Ÿ”ฅHot Module Replacement๐Ÿ”ฅ using Babel macro
JavaScript
31
star
9

rescript-deno

WIP: ReScript bindings to Deno API
ReScript
30
star
10

blog-src

๋ธ”๋กœ๊ทธ ์†Œ์Šค์ฝ”๋“œ
TypeScript
29
star
11

vite-plugin-relay-lite

Vite plugin for more convenient Relay experience.
TypeScript
21
star
12

deck-feconf-2022

FEConf 2022 ์„ธ์…˜ "Edge Computing์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ์›น ๊ฐœ๋ฐœ์˜ ๋ณ€ํ™”" ์žฅํ‘œ
TypeScript
20
star
13

awesome-list

My personal awesome list based on GitHub stars
19
star
14

concurrently.macro

Transform your async function to be run concurrently much as possible
TypeScript
17
star
15

yarn-plugin-bump

Non-interactive dependency upgrade tool for Yarn 2
TypeScript
15
star
16

rescript-relay-issue-tracker

ReScript Relay port of Relay's official issue tracker example
ReScript
13
star
17

gatsby-theme-stitches

A GatsbyJS plugin for styling with Stitches
TypeScript
12
star
18

deck-dev-dive-2022

Dev Dive 2022 ์„ธ์…˜ "TDD: ๋‚ด ์ฝ”๋“œ์˜ ํ’ˆ์งˆ์„ ๋†’์—ฌ์ฃผ๋Š” Type-Driven Development" ์žฅํ‘œ
TypeScript
12
star
19

dotfiles

My OS Configuration files
Shell
11
star
20

gatsby-source-velog

GatsbyJS source plugin for Velog
TypeScript
11
star
21

fastify-auth0-login

A Fastify plugin for easily adding login feature via Auth0's Authorization Code Flow
TypeScript
7
star
22

worker-grain-template

A template for kick starting a Cloudflare Workers project with Grain
JavaScript
7
star
23

rescript-tinybench

ReScript bindings to tinybench
ReScript
6
star
24

jdbc-jett-renderer

์—‘์…€ ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ ํ…œํ”Œ๋ฆฟ์— MySQL DB ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๋ Œ๋”๋งํ•˜๊ธฐ
Groovy
6
star
25

reason-todomvc

TodoMVC implementation written in ReasonML
Reason
5
star
26

gatsby-plugin-head-seo

A Gatsby Plugin to support SEO, built-on top of the Gatsby Head API. No react-helmet required.
TypeScript
5
star
27

benchmark-rescript-v11-migration

ReScript
5
star
28

cborpc

Concise RPC framework based on CBOR.
5
star
29

use-pulled-grid

A React hook provides responsive grid container style
TypeScript
5
star
30

blog-posts

๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธ
4
star
31

asdf-grain

Grain language plugin for asdf version manager.
Shell
4
star
32

cleankeeper

A GitHub Action to clean obsoleted greenkeeper branches
Shell
4
star
33

react-directory-input

A simple component to handle a directory as a single file
TypeScript
3
star
34

asdf-sqldef

asdf plugin for sqldef
Shell
3
star
35

mattermost-typed

โ›” DEPRECATED โ›” Flow type definition library for Mattermost
JavaScript
3
star
36

advent-of-code-2020

Solutions for Advent of Code 2020
Reason
3
star
37

rescript-react-error-boundary

BuckleScript binding for react-error-boundary
ReScript
3
star
38

cssfn

Functional CSS-in-JS
3
star
39

hansei-2022-web-practice

ํ•œ์„ธ์‚ฌ์ด๋ฒ„๋ณด์•ˆ๊ณ ๋“ฑํ•™๊ต ์ทจ์—…๋งž์ถค๋ฐ˜ 2022 ์‹ค์Šต ์ฝ”๋“œ
TypeScript
3
star
40

mattermost-plugin-graphql

GraphQL API Plugin for Mattermost
Go
3
star
41

isclubhouseavailable.info

Is clubhouse available on my platform?
JavaScript
3
star
42

gatsby-plugin-concurrent-mode

Gatsby plugin to enable React Concurrent Mode
TypeScript
2
star
43

react-stricter-mode

Never use impure func for render / memo / lazy-init
2
star
44

repm-registry

Certificated and quality assured user bindings registry
2
star
45

cb-mattermost

codeBeamer notifications in Mattermost
Java
2
star
46

open-sauced-goals

2
star
47

asdf-mint

asdf plugin for Mint language
Shell
2
star
48

mediaquerylist.addeventlistener

A polyfill for MediaQueryList.prototype.addEventListener
JavaScript
2
star
49

charm-dom

Yet another DOM implementation for research purpose
2
star
50

codebeamer-docker

codeBeamer docker image
Shell
2
star
51

reason-relay-issue-tracker

WIP: Relay's issue-tracker example rewritten in ReasonML
Reason
2
star
52

mattermost-typescript

Mattermost API driver written in TypeScript
TypeScript
2
star
53

bs-react-cache

BuckleScript binding for experimental react-cache API.
Reason
1
star
54

designed-css

An experimental style-guide integrated CSS-in-JS solution
1
star
55

rails-study-notes

Ruby on Rails ์Šคํ„ฐ๋”” ๋…ธํŠธ
1
star
56

gatsby-plugin-pagemeta

A GatsbyJS plugin to use comments as page metadata.
TypeScript
1
star
57

apollo-hackernews-example

Simple HackerNews Client Application using Apollo Client (No server)
JavaScript
1
star
58

favicon-snatcher

Fast & Reliable alternative to favicon snatcher built on Cloudflare Workers
TypeScript
1
star
59

gatsby-plugin-loadable-components

Gatsby Plugin to use Loadable Components out-of-box
1
star
60

jampot

Notthing here yet
1
star
61

provisioning

Provisioning things that I need for life
1
star
62

gatsby-plugin-dedupe-head

A GatsbyJS plugin to omit duplicated elements in the `<head>`
TypeScript
1
star
63

cbor-toolkit

WIP: CBOR toolkit
1
star
64

fastify-graphql-voyager

A Fastify plugin to serve schema visualization using GraphQL Voyager
TypeScript
1
star
65

next-prisma-minimal-example

JavaScript
1
star
66

mattergen

WIP: Automatically generates type definitions from Mattermost core
Go
1
star
67

gatsby-plugin-turnstile

A Gatsby plugin to integrate Cloudflare turnstile client-side
TypeScript
1
star
68

graphql-website

Official GraphQL Website (In progress)
TypeScript
1
star
69

mattermost-desktop-app

Native desktop app for Mattermost built on top of ReasonML and Revery-UI
Reason
1
star
70

gatsby-starter-typescript

A minimal GatsbyJS starter template using TypeScript
1
star
71

graphql-opinion

My own opinion archive for GraphQL (Korean and/or English)
1
star
72

typed-manifest

Type-safe webapp manifest builder
1
star