esbuild
esbuild copied to clipboard
evanw
[Feature] Use html as start point for bundling
Would this be possible?
So that also both script tag types are supported (type=module and standard globals ones)
Just realized I haven't commented on this yet. I think this could be a cool feature, but I assume that most people who want to do this would also need CSS bundling to work too. So I'm considering this as being blocked by #20.
I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:
esbuild < input.js
and
<script src="index.js"></script>
might work the same.
probably it is better to write a custom loader for it?
I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file
I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:
esbuild < input.jsand
<script src="index.js"></script>might work the same.
probably it is better to write a custom loader for it?
I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file
but there could be more script files, and also inlined scripts.
I think it can be achieved by parsing html file and finding a script tag. And then using it as an input file, so:
esbuild < input.jsand
<script src="index.js"></script>might work the same. probably it is better to write a custom loader for it? I know that the feature is blocked by CSS bundling but I had some thoughts about implementing the feature of html as input file
but there could be more script files, and also inlined scripts.
well, in that case, we could collect all of the scripts and parse inline scripts the same way as esbuild --bundle
+1 for this use-case. To give some context: Snowpack's new built-in optimize/bundle step is internally powered by esbuild. Snowpack supports HTML files as bundle entrypoints by scanning them for all script tags and then passing those JS files to esbuild as the entrypoints to bundle. For this to work properly, inline scripts have to be extracted into separate files and then linlined back in at the end. Hashed entrypoint filenames will introduce some additional relinking work for remote scripts as well.
This workaround is workable, but it would be great if everyone didn't need to do this, and esbuild could handle this use-case either natively or via plugin.
For this to work properly, inline scripts have to be extracted into separate files and then linlined back in at the end
Can we not use esbuild's transform API as opposed to build API for this use case?
Just FYI, I was playing around with this a little with https://github.com/osdevisnot/sorvor
One big thing I really like about parcel is I can do parcel bundle index.html or parcel serve index.html.
The html file could be something like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="favicon.ico" />
<title>A HTML Page</title>
<script src="./src/index.tsx" defer></script>
</head>
<body class="bg-gray-100">
<div id="root"></div>
</body>
</html>
Parcel is smart enough to know favicon.ico needs to be copied, ./src/index.tsx is an entry point, and within index.tsx the scss/css file is also emitted.
import React from 'react';
import {render} from 'react-dom';
import {App} from './App';
import './App.scss';
render(<App />, document.getElementById('root'));
and outputted as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<title>A HTML Page</title>
<script src="app.js" defer></script>
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-100">
<div id="root"></div>
</body>
</html>
Directory structure of build dir
index.html
app.css
app.css.map
app.js
app.js.map
favicon.ico
esbuild doing simple html parsing into entrypoints would really make it extra nice.
95% of SPA projects could really be simplified with something like this esbuild --bundle index.html --out-dir=build 💥
I'm happy to proof-of-concept this out in a PR. @evanw do you think you'd accept such a direction ?
Hello! We just released a plugin for esbuild that handles html files as entry point, you can find it here. It's still a work in progress but a if you would try it, any feedback is welcome! Feel free to file any issue too!
One important aspect of pointing Parcel to an index.html is cache busting. It will turn my js/index.js into sth. like js.00a46daa.js and rewrite the HTML. Same with favicon.21b6e204.ico etc. The example above is missing that.
@Prinzhorn You’re on the money. This is definitely one of the features I’m most looking forward to. Second would be CSS tree-shaking (not even sure how that would get implemented), but HTML entry points would be amazing.
If we talk about the same thing, this is the oldest open issue of Webpack https://github.com/webpack/webpack/issues/536 Their discussion might be interesting also there are some plugin based solutions apparently
given that there's @edoardocavazza's plugin that does this, does it still make sense to have this issue here?
the main benefit would be for those of us who only use the command line, for which the plugin api isn't available
Additionally, the plugin mentioned above by @edoardocavazza (https://www.npmjs.com/package/@chialab/esbuild-plugin-html) is limited to a single html entrypoint.
If esbuild supports html entrypoints, I hope it doesn't special-case that into "a single html entrypoint." That limits its usefulness to purely-single-page apps (vs multiple rich, bundled pages).
@evanw I strongly agree that your focus should be on JS/CSS for now. But a simple code example for using meta and replacement outfile with hash in html would be very useful and would avoid creating weird solutions and writing dirty plugins like other build enviroments. I think one afternoon is enough to write it, but it has a great impact in giving the audience an idea for the best solution. Thank you in advance
the plugin from @edoardocavazza needs some fixes and then it can support multiple entry points. I've hacked it together myself and opened an incident to ask for a cleaner solution: https://github.com/chialab/rna/issues/128
Parcel didn't work out well for me, also, the server hadn't been reloading when I was making changes, which was the main reason why I was trying it out. It didn't seem as stable as I hoped.
@edoardocavazza's plugin is now very advanced and definitely an interesting reference for writing esbuild plugins in general. It doesn't fit my needs because it's doing too much, so I'm using it as a reference to write my own project-specific HTML plugin that will do only what I need.
But it's quite confusing, the plugin needs to run a separate build for detected assets, which should then be rebuilt on each change, and somehow also cause the development server to reload… Challenging, but hopefully I'll get there one day.
@jogibear9988
using the html-bundler-webpack-plugin is possible to use html as start point for bundling.
Please see my comment in the Use a HTML file as an entry point.
@jogibear9988 Hi, you mean html-bundler-webpack-plugin can also apply into esbuild config?
you mean html-bundler-webpack-plugin can also apply into esbuild config?
no, sorry. It was an example how it works in webpack via the plugin.
you mean html-bundler-webpack-plugin can also apply into esbuild config?
no, sorry. It was an example how it works in webpack via the plugin. Ok, does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with built js/css? Thx!
Ok, does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with built js/css? Thx!
Not that I'm aware of, but you can hack your own. meta needs to be set to true because the metafile data will contain the output paths that you can use to inject asset tags into your HTML. The plugin should use the onEnd callback, that's when the metafile data gets populated.
I used chokidar to watch the HTML file and trigger esbuild to rebuild.
Actually, @chialab/esbuild-plugin-html seems to work this way. It didn't fit my needs, but it might yours.
The HTML entry point should also support import maps.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
index.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="description" content="import map support" />
<title>import map support</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="importmap">
{
"imports": {
"lib": "/j/lib.mjs",
}
}
</script>
<link
rel="modulepreload"
href="j/app.mjs"
as="script"
crossorigin="anonymous"
/>
<link
rel="icon"
href="data:image/x-icon;base64,"
type="image/x-icon"
sizes="any"
/>
</head>
<body>
<main>
<h1>import map support</h1>
</main>
<script type="module" src="j/app.mjs"></script>
</body>
</html>
j/app.mjs
import { test } from 'lib'
test();
j/lib.mjs
export test = () => console.log('test');
