Skip to main content

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 add --dev 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:

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

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