esbuild-plugin-manifest

This plugin will generate a manifest.json file, mapping original asset names to their corresponding output name.

Install

1npm install --save-dev esbuild esbuild-plugin-manifest

Usage

Create file build.js:

1const esbuild = require('esbuild');
2const manifestPlugin = require('esbuild-plugin-manifest')
3
4esbuild.build({
5    entryPoints: ['src/index.js'],
6    bundle: true,
7    outdir: 'output/',
8    plugins: [manifestPlugin()],
9}).catch((e) => console.error(e.message))

This will generate a manifest.json in the output directory with a mapping of all the unhashed filenames to their corresponding hashed output filename:

1{
2  "output/index.js": "output/index-4QTUNIID.js"
3}

Options

options.hash

Type: Boolean

Default: true

By default we assume that you want to hash the output files. We use [dir]/[name]-[hash] as the default hash format. You can disable hashing by setting this to false or you can set your own hash format by directly using esbuild's entryNames option.

options.shortNames

Type: Boolean | 'input' | 'output'

Default: false

By default we will use the full input and output paths {"output/index.js":"output/index-4QTUNIID.js"}, but when this option is enabled it will use the basename of the files {"index.js":"index-4QTUNIID.js"}

options.extensionless

Type: Boolean | 'input' | 'output'

Default: false

We'll keep all file extensions by default, but you can specify true to remove them from both or one of 'input' or 'output' to only remove them from the input or output respectively. Eg: specifying manifestPlugin({ extensionless: 'input' }) will result in {"output/index":"output/index-4QTUNIID.js"}

options.filename

Type: String

Default: manifest.json

The name of the generated manifest file in the output directory.

options.generate

Type: Function

Default: undefined

A custom Function to create the manifest. The passed function should match the signature of (entries: {[key: string]: string}) => Object; and can return anything as long as it's serialisable by JSON.stringify.

options.filter

Type: Function

Default: undefined

Allows filtering the files which make up the manifest. The passed function should match the signature of (filename: string) => boolean. Return true to keep the file, false to remove the file.

options.useEntrypointKeys

Type: Boolean

Default: false

By default, we use the same extension of the output file as the keys of the manifest key entry. Use this option if you'd rather use the input file (entrypoint) as the manifest key instead.

options.append

Type: Boolean

Default: false

By default, we will overwrite the manifest file if it already exists. This option will append to the existing manifest file instead and only overwrite the entries that have changed.

Advanced Usage Examples

Typescript Entrypoint

1// build.js
2const esbuild = require('esbuild');
3const manifestPlugin = require('esbuild-plugin-manifest')
4
5esbuild.build({
6  entryPoints: ['src/index.ts'],
7  bundle: true,
8  outdir: 'output/',
9  plugins: [manifestPlugin()],
10}).catch((e) => console.error(e.message))

1// manifest.json
2{
3  "output/index.js": "output/index-4QTUNIID.js"
4}

Entrypoint Keys (.ts file example)

1// build.js
2const esbuild = require('esbuild');
3const manifestPlugin = require('esbuild-plugin-manifest')
4
5esbuild.build({
6  entryPoints: ['src/index.ts'],
7  bundle: true,
8  outdir: 'output/',
9  plugins: [manifestPlugin({useEntrypointKeys: true})],
10}).catch((e) => console.error(e.message))

1// manifest.json
2{
3  "src/index.ts": "output/index-4QTUNIID.js"
4}

Multiple Formats

To generate multiple files from the same entrypoint with esbuild, you need to run it multiple times. Utilize esbuilds outExtension option along with our append option to generate multiple files from the same entrypoint.

1// build.js
2import * as esbuild from 'esbuild'
3import manifestPlugin from 'esbuild-plugin-manifest'
4
5await esbuild.build({
6  entryPoints: ['src/index.js'],
7  bundle: true,
8  outdir: 'output/',
9  format: 'cjs',
10  plugins: [manifestPlugin()],
11}).catch((e) => console.error(e.message))
12
13await esbuild.build({
14  entryPoints: ['src/index.js'],
15  bundle: true,
16  outdir: 'output/',
17  format: 'esm',
18  outExtension: { '.js': '.mjs' },
19  plugins: [manifestPlugin({ append: true })],
20}).catch((e) => console.error(e.message))
21

1// manifest.json
2{
3  "output/index.js": "output/index-4QTUNIID.js",
4  "output/index.mjs": "output/index-5RUVOJJE.mjs"
5}