ESbuild

Options See on deno.land

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

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

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;