@techor/pack

Bundling your TypeScript and CSS packages with zero configuration

Features

• An extremely fast bundler built on top of esbuild
• Output or watch multiple formats in one-linear command
• Support ESM, CJS, and IIFE JavaScript modules
• Support CSS bundle
• Generate .d.ts type declarations
• Extract options from package.json
• Prevent bundling dependencies and peerDependencies by package.json

Getting Started

npm i @techor/pack

Usage

techor pack [entryPaths...]
techor-pack [entryPaths...]

Check out the available options here for now

techor pack analyzes the package.json entry point relative to input sources in the src directory for builds.

JavaScript packages

.
├── package.json
└── packages
    └─── a
         ├─── src
         │    ├─── index.ts
         │    └─── index.browser.ts
+        ├─── dist
+        │    ├─── index.js
+        │    ├─── index.mjs
+        │    ├─── index.d.ts
+        │    └─── index.browser.ts
         └─── package.json

Simultaneously output cjs, esm, iife, type declarations respectively according to main, module, browser, types of package.json

{
    "name": "a",
    "scripts": {
        "build": "ts-node ../techor/src/bin pack",
        "dev": "pnpm run build --watch"
    },
    "main": "dist/index.js",
    "browser": "dist/index.browser.js",
    "module": "dist/index.js",
    "types": "dist/index.d.ts",
    "jsnext:main": "dist/index.js",
    "esnext": "dist/index.js",
    "exports": {
        ".": {
            "require": "./dist/index.js",
            "import": "./dist/index.js",
            "types": "./dist/index.d.ts"
        }
    },
    "files": [
        "dist"
    ]
}

If you only want to pack specific javascript modules, remove the corresponding entry point from package.json.

Run with the above configuration:

pnpm run build

Now import the above package a in your project or publish it.

import 'a'

CSS packages

.
├── package.json
└── packages
    └─── b
         ├─── src
         │    └─── index.css
+        ├─── dist
+        │    └─── index.css
         └─── package.json

Packaging CSS is more straightforward, configuring style and main entry points in package.json.

{
    "name": "b",
    "scripts": {
        "build": "ts-node ../techor/src/bin pack",
        "dev": "pnpm run build --watch"
    },
    "main": "./dist/index.css",
    "style": "./dist/index.css",
    "files": [
        "dist"
    ]
}

Run with the above configuration:

pnpm run build

Now import the above package b in your project or publish it.

@import 'b'

Multiple entry points

techor pack <entryPaths...> supports glob patterns that let you specify multiple entry points at once, including the output of nested directories.

Specifying an entry point will cause the JavaScript output format to be preset to cjs,esm.

techor src/**/*.ts

.
├── package.json
└── packages
    └─── a
         ├─── src
         │    ├─── index.ts
         │    └─── utils
         │         └─── exec.ts
+        ├─── dist
+        │    ├─── index.js
+        │    ├─── index.mjs
+        │    └─── utils
+        │         ├─── exec.cjs
+        │         └─── exec.mjs
         └─── package.json

The same goes for multiple CSS entries:

techor src/**/*.css

.
├── package.json
└── packages
    └─── a
         ├─── src
         │    ├─── index.css
         │    └─── components
         │         ├─── card.css
         │         └─── button.css
+        ├─── dist
+        │    ├─── index.css
+        │    └─── components
+        │         ├─── card.css
+        │         └─── button.css
         └─── package.json

Usually, it would be best to bundle CSS packages through a main index.css and output other CSS files so developers can import on demand instead of the whole package. For example @master/keyframes.css

Exclude external dependencies

techor pack automatically excludes external dependencies to be bundled by the .dependencies and peerDependencies of package.json

src/index.ts

import '@master/css'
import '@master/css.webpack'
import '@master/style-element.react'

package.json

{
    "name": "externals",
    "main": "dist/index.js",
    "exports": {
        ".": {
            "require": "./dist/index.js"
        }
    },
    "files": [
        "dist"
    ],
    "dependencies": {
        "@master/css": "^2.0.0-beta.55"
    },
    "peerDependencies": {
        "@master/style-element.react": "^2.0.0-beta.7"
    },
    "devDependencies": {
        "@master/css.webpack": "^2.0.0-beta.55"
    }
}

Run with the above setup:

techor pack --platform node

@master/css.webpack is bundled into dist/index.js, except for @master/css and @master/style-element.react.

So if there is an external package that needs to be bundled, you just install it to devDependencies via npm i <some-package> --save-dev, then techor pack will not exclude it.

Multiple outputs

techor pack defaults to pack multiple outputs with different formats and platforms according to exports bin in package.json.

.
├── package.json
└── packages
    └─── a
         ├─── src
         │    ├─── index.ts
         │    └─── utils
         │         └─── exec.ts
+        ├─── dist
+        │    ├─── index.js
+        │    ├─── index.mjs
+        │    └─── utils
+        │         ├─── exec.cjs
+        │         └─── exec.mjs
         └─── package.json

package.json

{
    "name": "externals",
    "exports": {
        ".": {
            "require": "./dist/index.js",
            "import": "./dist/index.js"
        },
        "./utils/exec": {
            "require": "./dist/utils/exec.cjs",
            "import": "./dist/utils/exec.mjs"
        }
    }
}

Any nested conditions in exports like node, browser, default, require, and import will be mapped to ESBuild’s format and platform options.

Options

mangleProps

techor pack --mangle-props '^_'

- module.exports._parse = parse;
- module.exports._enoent = enoent;
+ module.exports.b = parse;
+ module.exports.c = enoent;