ESbuild

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());

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: {
    bundle: true,
    format: "esm",
    minify: true,
    keepNames: true,
    platform: "browser",
    target: "esnext",
    incremental: true,
    treeShaking: true,
  },
}));

See all available options in Deno Doc.

esm.sh

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

import classNames from "npm:classnames";

is converted to:

import classNames from "https://esm.sh/classnames";

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;