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

Setup

Package building does not apply to every project, only packages, so where you place the build task is up to you. The following patterns are suggested:

• A build task in .moon/tasks/node-library.yml, which will be inherited by package based projects.
• A build task in moon.yml for each project.

Globally inherited

.moon/tasks/node-library.yml

build:
    command:
        - 'packemon'
        - 'pack'
        # Add `engines` field to package
        - '--addEngines'
        # Add `exports` field to package
        - '--addExports'
        # Generate TypeScript declarations
        - '--declaration'
    inputs:
        # Source files only
        - 'src/**/*'
        - 'package.json'
        # A build specific tsconfig
        - 'tsconfig.*.json'
        - '/tsconfig.options.json'
    outputs:
        # Compiled files: lib, esm, cjs, mjs, etc
        - 'lib'

Depending on your Packemon configuration, you may need to change the task outputs per project like so:

<package>/moon.yml

# Define additional compiled files unique to this project
tasks:
    build:
        outputs:
            - 'cjs'

Per project

<package>/moon.yml

build:
    command:
        - 'packemon'
        - 'pack'
        # Add `engines` field to package
        - '--addEngines'
        # Add `exports` field to package
        - '--addExports'
        # Generate TypeScript declarations
        - '--declaration'
    inputs:
        # Source files only
        - 'src/**/*'
        - 'package.json'
        # A build specific tsconfig
        - 'tsconfig.*.json'
        - '/tsconfig.options.json'
    outputs:
        # Compiled files: lib, esm, cjs, mjs, etc
        - 'lib'

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"
  }
}