Packemon example

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import AddDepsTabs from '@site/src/components/AddDepsTabs'; import HeadingApiLink from '@site/src/components/Docs/HeadingApiLink';

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.

Setup

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

:::tip

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

:::

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

{
  "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.

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