Packemon example

In this guide, you'll learn how to integrate Packemon into moon. Packemon is a tool for properly building npm packages for distribution, it does this by providing the following functionality:

• Compiles source code to popular formats: CJS, MJS, ESM, UMD, etc.
• Validates the package.json for incorrect fields or values.
• Generates exports mappings for package.json based on the define configuration.
• And many more optimizations and features!

Begin by installing packemon in your root. We suggest using the same version across the entire repository.

Yarn

yarn add --dev packemon

Yarn (classic)

yarn add --dev packemon

# If using workspaces
yarn add --dev -W packemon

npm

npm install --save-dev packemon

pnpm

pnpm add --save-dev packemon

# If using workspaces
pnpm add --save-dev -w packemon

Bun

bun install --dev packemon

Setup

Since Packemon is per-project, the associated moon tasks should be defined in each project's moon.yml file.

tip

We suggest inheriting Packemon tasks from the official moon configuration preset.

<project>/moon.yml

# Inherit tasks from the `packemon` preset
# https://github.com/moonrepo/moon-configs
tags: ['packemon']

# Set the output formats
tasks:
  build:
    outputs:
      - 'cjs'

TypeScript integration

Packemon has built-in support for TypeScript, but to not conflict with a typecheck task, a separate tsconfig.json file is required, which is named tsconfig.<format>.json.

This config is necessary to only compile source files, and to not include unwanted files in the declaration output directory.

tsconfig.esm.json

{
  "extends": "../../tsconfig.options.json",
  "compilerOptions": {
    "outDir": "esm",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "references": []
}

Build targets

To configure the target platform(s) and format(s), you must define a packemon block in the project's package.json. The chosen formats must also be listed as outputs in the task.

package.json

{
  "name": "package",
  // ...
  "packemon": {
    "format": "esm",
    "platform": "browser"
  }
}