Comments (23)
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 ?
from esbuild.
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!
from esbuild.
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.
from esbuild.
@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
from esbuild.
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.
from esbuild.
@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.
from esbuild.
the main benefit would be for those of us who only use the command line, for which the plugin api isn't available
from esbuild.
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).
from esbuild.
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
from esbuild.
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
from esbuild.
If we talk about the same thing, this is the oldest open issue of Webpack
webpack/webpack#536
Their discussion might be interesting also there are some plugin based solutions apparently
from esbuild.
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');
from esbuild.
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
but there could be more script files, and also inlined scripts.
from esbuild.
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 filebut 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
from esbuild.
+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.
from esbuild.
given that there's @edoardocavazza's plugin that does this, does it still make sense to have this issue here?
from esbuild.
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: chialab/rna#128
from esbuild.
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.
from esbuild.
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?
from esbuild.
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.
from esbuild.
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!
from esbuild.
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.
from esbuild.
Actually, @chialab/esbuild-plugin-html
seems to work this way. It didn't fit my needs, but it might yours.
from esbuild.
Related Issues (20)
- Tree shaking differs between splitting and no splitting
- Simple way to make an esbuild plugin that watches src directory recursively? HOT 2
- Run DCE without minify? HOT 4
- Explanation of colors in Bundle Size Analyzer HOT 1
- Compile to ES6? [Feature request] HOT 2
- Optionally disable CSS selectors renaming in local-css across entrypoints
- Error resolving an external transitive dependency when using pnpm HOT 4
- Import with wildcard HOT 2
- Inside docker, esbuild quietly exits with 0 when --serve is enabled HOT 4
- Build failing in Dockerfile but works on local Windows machine
- Broken automatic JSX transform HOT 7
- ERROR: Expected "*/" to terminate multi-line comment HOT 2
- Expected ";" but found "const" - typescript transformer HOT 2
- Option to disable injected comment of input path file HOT 2
- Additional directories to watch HOT 3
- esbuild does not fail with undefined functions HOT 5
- Segmentation fault when using with vite and sveltekit project HOT 1
- Glob imports must match exactly
- Pass argument to IIFE HOT 1
- Esbuild causing bundle breakage when applied twice to the same bundle
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esbuild.