Automatically configure esbuild from html
Automatically configure & run esbuild from <script> and <link rel="stylesheet"> used in an .html file.
npm:
npm install -g @jarred/htmlbuild
yarn:
yarn global add @jarred/htmlbuild
# All additional flags are forwarded to esbuild.htb index.html --outdir=disthtmlbuild index.html --outdir=dist
This lets you use an HTML file to configure esbuild.
Given an HTML file like this:
<html><head><link href="foo.css" rel="stylesheet" /><!- Notice the TypeScript: --><script src="./index.ts"></script><script src="./deep/so/very/deep.ts"></script></head><body>HI!</body></html>
htmlbuild parses the HTML and turns each <script> or <link rel="stylsheet"> into an entryPoint. That example generates a config that looks like this:
{bundle: true,metafile: true,entryPoints: ['/Users/jarredsumner/Code/htmlbuild/test-dir/index.js','/Users/jarredsumner/Code/htmlbuild/test-dir/deep/so/very/deep.ts','/Users/jarredsumner/Code/htmlbuild/test-dir/foo.css']}
Then, it runs esbuild with any flags you passed in. Using esbuild’s metadata, it produces a new HTML file that looks like this:
<html><head><link href="foo.css" rel="stylesheet" /><link rel="stylesheet" href="index.css" /><script src="index.js"></script><script src="deep/so/very/deep.js"></script></head><body>HI!</body></html>
Notice the extra index.css?
That’s because index.ts imported index.css:
import "./index.css";console.log('It detected the imported index.css file and inserted it directly above <script src="index.js">');