Skip to main content

Using Eik with esbuild

This guide describes how to configure esbuild to use build-time import mapping. The guide assumes you have an eik.json containing at least one "import-map".

Getting started​

Install @eik/esbuild-plugin, and esbuild if you haven't already.

npm install --save-dev esbuild @eik/esbuild-plugin

Configure your build​

Create a build.js file or extend your existing build script to add the Eik plugin.

import * as eik from "@eik/esbuild-plugin";
import esbuild from "esbuild";

const options = /** @type {esbuild.BuildOptions}*/ ({
	entryPoints: ["./src/index.js"],
	outdir: "./public",
	format: "esm",
	platform: "browser",
	target: ["es2017"],
	bundle: true,
	sourcemap: true,
});

const watch = process.argv.includes("--dev");
if (watch) {
	let ctx = await esbuild.context(options);
	await ctx.watch();
	console.log("[esbuild] watching...");
} else {
	// Use the Eik plugin to to import mapping for the production build
	// Load the import maps listed in eik.json from the Eik server
	await eik.load();
	await esbuild.build({
		...options,
		plugins: [eik.plugin()],
	});
}

Run your build​

Add these scripts to package.json if you haven't already.

{
	"scripts": {
		"build": "node ./build.js",
		"dev": "node ./build.js --dev"
	}
}

Now you can run a production build using the Eik plugin by running this command.

npm run build

Advanced usage​

See the plugin documentation for advanced options on loading import maps.