ESbuild

Bundle JavaScript, TypeScript and JSX files using esbuild library.

Options

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".ts", ".js" ]

esm object

Global options for esm.sh CDN used to fetch NPM packages

See https://esm.sh/#docs

dev boolean: To include the ?dev option to all packages
cjsExports record: Configure the cjs-exports option for each package
deps record: Configure the deps for each package
target es2015 es2022 esnext deno denonext: Configure the target for each package
Default:
"esnext"

options object

The options for esbuild

See https://esbuild.github.io/api/#general-options

bundle boolean: Documentation: https://esbuild.github.io/api/#bundle
Default:
true
splitting boolean: Documentation: https://esbuild.github.io/api/#splitting
preserveSymlinks boolean: Documentation: https://esbuild.github.io/api/#preserve-symlinks
outfile string: Documentation: https://esbuild.github.io/api/#outfile
metafile boolean: Documentation: https://esbuild.github.io/api/#metafile
outdir string: Documentation: https://esbuild.github.io/api/#outdir
Default:
"./"
outbase string: Documentation: https://esbuild.github.io/api/#outbase
Default:
"."
external string[]: Documentation: https://esbuild.github.io/api/#external
packages bundle external: Documentation: https://esbuild.github.io/api/#packages
alias record: Documentation: https://esbuild.github.io/api/#alias
loader object: Documentation: https://esbuild.github.io/api/#loader
resolveExtensions string[]: Documentation: https://esbuild.github.io/api/#resolve-extensions
mainFields string[]: Documentation: https://esbuild.github.io/api/#main-fields
conditions string[]: Documentation: https://esbuild.github.io/api/#conditions
write boolean: Documentation: https://esbuild.github.io/api/#write
allowOverwrite boolean: Documentation: https://esbuild.github.io/api/#allow-overwrite
tsconfig string: Documentation: https://esbuild.github.io/api/#tsconfig
outExtension object: Documentation: https://esbuild.github.io/api/#out-extension
publicPath string: Documentation: https://esbuild.github.io/api/#public-path
entryNames string: Documentation: https://esbuild.github.io/api/#entry-names
chunkNames string: Documentation: https://esbuild.github.io/api/#chunk-names
assetNames string: Documentation: https://esbuild.github.io/api/#asset-names
inject string[]: Documentation: https://esbuild.github.io/api/#inject
banner object: Documentation: https://esbuild.github.io/api/#banner
footer object: Documentation: https://esbuild.github.io/api/#footer
entryPoints string[] record object[]: Documentation: https://esbuild.github.io/api/#entry-points
stdin object: Documentation: https://esbuild.github.io/api/#stdin
plugins object[]: Documentation: https://esbuild.github.io/plugins/
absWorkingDir string: Documentation: https://esbuild.github.io/api/#working-directory
nodePaths string[]: Documentation: https://esbuild.github.io/api/#node-paths

importMap object boolean

The import map to use By default, it reads the import map from the deno.json file

Description

The plugin esbuild processes your JavaScript and TypeScript files using esbuild bundler.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";

const site = lume();

site.use(esbuild(/* Options */));

export default site;

Configuration

The available options are:

extensions: Array with the extensions of the files that this plugin will handle. By default it is [".js", ".ts"].
options: The options to pass to the esbuild library. See the esbuild documentation.
esm: Options to pass to requests to esm.sh.

Example with the default options:

site.use(esbuild({
  extensions: [".ts", ".js"],
  options: {
    plugins: [],
    bundle: true,
    format: "esm",
    minify: true,
    keepNames: true,
    platform: "browser",
    target: "esnext",
    treeShaking: true,
    outdir: "./",
    outbase: ".",
  },
}));

ESM

This plugin converts any module imported from npm: or jsr: to esm.sh. For example, the following code:

import classNames from "npm:classnames";
import { concat } from "jsr:@std/bytes/concat";

is converted to:

import classNames from "https://esm.sh/classnames";
import { concat } from "https://esm.sh/classnames/jsr/@std/bytes/concat";

You can use the esm key to add parameters to some packages. See the esm.sh docs for more info.

For example, let's say you are using react-table in your code, that is a CJS package.

import { useTable } from "npm:react-table";

ESM.sh not always can resolve modules from CJS to ESM, so you may get an error like react-table not provide an export named useTable. You can specify the export names to this package with the cjsExports parameter:

site.use(esbuild({
  extensions: [".jsx"],
  esm: {
    cjsExports: {
      "react-table": ["useTable"],
    },
  },
}));

The available options for esm are:

cjsExports: To specify the modules exported by a CJS package.

dev: To include the ?dev flag to all packages. Example:

site.use(esbuild({
  esm: {
    dev: true,
  },
}));

deps: To specify the dependencies of a specific package.

site.use(esbuild({
  esm: {
    deps: {
      swr: "react@17.0.2",
    },
  },
}));

Hooks

This plugin exposes the following hooks:

addEsbuildPlugin(plugin) To add additional plugins.

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";
import coffeescript from "npm:esbuild-coffeescript";

const site = lume();

site.use(esbuild());

site.hooks.addEsbuildPlugin(coffeescript);

export default site;