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 forpackage.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 (classic)
- npm
- pnpm
yarn add --dev packemon
yarn add --dev packemon
# If using workspaces
yarn add --dev -W packemon
npm install --save-dev packemon
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 inmoon.yml
for each project.
- Globally inherited
- Per project
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:
# Define additional compiled files unique to this project
tasks:
build:
outputs:
- 'cjs'
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.
{
"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"
}
}