ESbuild

Options

extensions string[]

Default:

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

options object

Default:

{
  plugins: [],
  bundle: true,
  format: "esm",
  minify: true,
  keepNames: true,
  platform: "browser",
  target: [
    "chrome107.0",
    "edge107.0",
    "firefox104.0",
    "ios16.0",
    "safari16.0"
  ],
  treeShaking: true,
  jsx: "automatic",
  outdir: "./",
  outbase: ".",
  jsxImportSource: "lume"
}

denoConfig string

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;

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

In the root we have 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. Because the Deno configuration may be different (you may need a different import map with all npm dependencies, or use another JSX library in frontend, like React or Preact), we have another deno.json file in that folder.

Let's 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 Deno loader under the hood).

Because we want to use main.tsx as the entry point, only this file needs to be added.

// The entry point
site.add("app/main.tsx");

// Esbuild with a different deno.json configuration
site.use(esbuild({
  denoConfig: "app/deno.json",
}));

Dependencies

It's recommended to register all NPM/JSR dependencies in the import map, in order to avoid issues in CI environments like Netlify.

For example, the following import makes esbuild to download the package from NPM and can cause errors if the Deno's cache folder doesn't have writing permissions:

import "npm:invokers-polyfill@1.0.3";

This issue is fixed by registering the dependency in the import map, so Deno can install it before the build process:

{
  "imports": {
    "invokers-polyfill": "npm:invokers-polyfill@1.0.3"
  }
}

import "invokers-polyfill";