ESbuild
Bundle JavaScript, TypeScript and JSX files using esbuild library.
Options See on deno.land
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: {
bundle: true,
format: "esm",
minify: true,
keepNames: true,
platform: "browser",
target: "esnext",
incremental: true,
treeShaking: true,
},
}));
ESM
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;