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 ?

[Feature] Use html as start point for bundling #31

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions