https://github.com/alloc/htmelt
https://github.com/alloc/htmelt
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alloc/htmelt
- Owner: alloc
- License: mit
- Created: 2023-04-15T01:02:20.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-25T00:12:16.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T00:54:29.680Z (almost 2 years ago)
- Language: TypeScript
- Size: 537 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# htmelt
Experimental bundler for HTML, powered by ESBuild and LightningCSS. It
"melts" (hence the name htmelt) any CSS and JS found in your HTML files
into CSS/JS bundles.
You should probably just use Vite.
### Features
- custom plugins with the `bundle.config.js` file
- ESBuild integration (TypeScript + ESM syntax, code splitting, dynamic imports)
- LightningCSS integration
- Browserslist integration
- HTML entry point scanning
- JS/CSS bundling
- `import.meta.glob` support
- worker bundling with `new URL('./worker.ts', import.meta.url)`
- great for [Web Extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) development
- dev server for painless extension reloading
- run multiple browsers at once (or use `--webext=chromium` to only run Chrome)
- `--watch` mode
- CSS hot reloading
- HTML rebuild on JS/HTML changes
- sets `NODE_ENV=development`
- default mode
- HTML/JS/CSS minification
- sets `NODE_ENV=production`
### Usage
Before running `htmelt`, you should move your HTML files into the `src/` directory and use relative paths for JS/CSS references inside your HTML files.
```sh
# Run in development mode
pnpm htmelt --watch
# Run in production mode
pnpm htmelt
```
If you want TypeScript to recognize `import.meta.glob` calls, you can add the following to your `tsconfig.json` file.
```json
{
"compilerOptions": {
"lib": ["esnext"],
"types": ["htmelt/client.d.ts"]
}
}
```
### Configuration
The `bundle.config.js` file allows for customization.
```js
export default {
// Browserslist targets.
targets: ['defaults', 'not IE 11'],
// Input and output directories.
src: './src',
build: './build',
// Tool-specific options.
esbuild: {...},
lightningcss: {...},
// If true, will delete the build directory before building.
deletePrev: false,
}
```