ESbuild

Options

extensions string[]

File extensions to bundle

Default:

[ ".ts", ".js", ".tsx", ".jsx" ]

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

denoConfig string

The Deno config file to use

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 */));
site.add("script.ts"); //Add the files to process

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", ".jsx", ".tsx"].
• options: The options to pass to the esbuild library. See the esbuild documentation.
• denoConfig: Options to pass to Deno to resolve the NPM and JSR dependencies.

denoConfig

If you need to specify an import map or compile JSX files, it's recomended to create a deno.json file with the front-end configuration, that can be used by the plugin and the code editor.

For example, let's say your project has the following structure:

|_ deno.json
|_ _config.ts
|_ app/
  |_ deno.json
  |_ main.tsx
  |_ components/
    |_ button.tsx
    |_ header.tsx

The root of your project has the files that you already know: deno.json to configure Deno and _config.ts to configure Lume. The app folder has the code that need to be processed by esbuild. But the Deno configuration may be different (you may want to place there an import map with all npm dependencies, or configure a different JSX library to frontend, like React or Preact). So we have another deno.json file there.

Now, you have to configure the plugin to load this deno config, that will be used to resolve the dependencies and compile the JSX files (The plugin uses the official esbuild-deno-loader under the hood).

Because we want to use main.tsx as the entry point, only this file needs to be added. The plugin can will resolve and include all imports.

site.add("app/main.tsx");
site.use(esbuild({
  denoConfig: "app/deno.json",
}));

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;