Iterate on a module locally, and dynamically assemble it with ESBuild.
Especially useful with npm link but can also work on arbitrary entrypoints.
Last active
June 5, 2025 14:57
-
-
Save inca/170df254d6d6da53e00a887bb2d9de30 to your computer and use it in GitHub Desktop.
ESBuild + Watch + Reload in Node.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { watch } from 'node:fs'; | |
| import { fileURLToPath } from 'node:url'; | |
| import { build, } from 'esbuild'; | |
| let webvisionBundle = await buildBundle(); | |
| const webvisionEntrypoint = fileURLToPath(import.meta.resolve('@athree/webvision')); | |
| const watchTarget = webvisionEntrypoint.replace('out/main/index.js', 'out'); | |
| watch(watchTarget, { | |
| recursive: true, | |
| }, async () => { | |
| webvisionBundle = await buildBundle(); | |
| }); | |
| export function getWebvisionModule() { | |
| return webvisionBundle.outputFiles[0].text; | |
| } | |
| export function getWebvisionUrl() { | |
| const webvisionModule = getWebvisionModule(); | |
| return `data:text/javascript;base64,${Buffer.from(webvisionModule).toString('base64')}`; | |
| } | |
| async function buildBundle() { | |
| return await build({ | |
| entryPoints: ['@athree/webvision'], | |
| format: 'esm', | |
| write: false, | |
| bundle: true, | |
| minify: true, | |
| keepNames: true, | |
| logLevel: 'info' | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment