Giter VIP home page Giter VIP logo

Comments (23)

nojvek avatar nojvek commented on April 28, 2024 35

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.

edoardocavazza avatar edoardocavazza commented on April 28, 2024 10

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.

Prinzhorn avatar Prinzhorn commented on April 28, 2024 8

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.

AliMD avatar AliMD commented on April 28, 2024 6

@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.

evanw avatar evanw commented on April 28, 2024 4

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.

zaydek avatar zaydek commented on April 28, 2024 3

@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.

bedax avatar bedax commented on April 28, 2024 3

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.

hunterloftis avatar hunterloftis commented on April 28, 2024 3

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.

talentlessguy avatar talentlessguy commented on April 28, 2024 1

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.

osdevisnot avatar osdevisnot commented on April 28, 2024 1

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.

LifeIsStrange avatar LifeIsStrange commented on April 28, 2024 1

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.

sdavids avatar sdavids commented on April 28, 2024 1

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.

jogibear9988 avatar jogibear9988 commented on April 28, 2024

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.

talentlessguy avatar talentlessguy commented on April 28, 2024

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.

well, in that case, we could collect all of the scripts and parse inline scripts the same way as esbuild --bundle

from esbuild.

FredKSchott avatar FredKSchott commented on April 28, 2024

+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.

wmertens avatar wmertens commented on April 28, 2024

given that there's @edoardocavazza's plugin that does this, does it still make sense to have this issue here?

from esbuild.

maartenst avatar maartenst commented on April 28, 2024

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.

silvenon avatar silvenon commented on April 28, 2024

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.

mebest100 avatar mebest100 commented on April 28, 2024

@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?

from esbuild.

webdiscus avatar webdiscus commented on April 28, 2024

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.

mebest100 avatar mebest100 commented on April 28, 2024

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.

silvenon avatar silvenon commented on April 28, 2024

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.

silvenon avatar silvenon commented on April 28, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.