A very simple bundler for HTML SFC
npm install html-bundle
and elements.
properties
$ npm install -D html-bundle
`
Add an entry to script in package.json (see flags below).
`json
{
"scripts": {
"build": "html-bundle"
}
}
`
Add a postcss.config.js file and run the build command.
If you do not create this config file, a minimal in-memory config file will be created with cssnano as plugin.
`properties
$ npm run build
`
CLI
--hmr: boots up a static server and enables Hot Module Replacement. This generates a development build and works best when not triggered from the main index.html
--secure: creates a secure HTTP2 over HTTPS instance. This requires the files localhost.pem and localhost-key.pem in the root folder. You can generate them with mkcert for instance.
--isCritical: uses critical to extract and inline critical-path CSS to HTML.
--handler: path to your custom handler. Here, you can handle all non-supported files. You can get the filename via process.argv[2].
Optional Config
_The CLI flags can also be set by the config. Flags set by the CLI will override the config._
Generate the config in the root and call it "bundle.config.js"
src: input path. Default to "src"
build: output path. Defaults to "build"
port: For the HMR Server. Defaults to 5000
deletePrev: Whether to delelte the build folder. Defaults to true
esbuild: Your additional config
html-minifier-terser: Your additional config
critical: Your additional config
Example:
`javascript
/* @type {import('html-bundle').Config} /
export default {
secure: true,
handler: "utils/staticFiles.js",
esbuild: {
external: ["images"],
},
};
`
Concept
The bundler always globs all HTML, CSS and TS/JS files from the src (config) directory and processes them to the build (config) directory. PostCSS is being used for CSS files and inline styles, html-minifier-terser for HTML and esbuild to bundle, minify, etc. for inline and referenced TS/JS. Server-sent events and hydro-js are used for HMR. In order to trigger SPA Routers, the popstate event is being triggered after HMR Operations.
Example hydro-js
Get the idea from hydro-starter.
Set "jsxFactory": "h" in tsconfig.json for JSX.
$3
`html
Example
`
Example Vue.js
Set "jsxFactory": "h" in tsconfig.json.
`html
Vue Example
`
Example React
Set "jsxFactory": "React.createElement" in tsconfig.json.
`html
React Example
``