unifee
unifee is Edge friendly bundler, all assets bundle into a single HTML.
Motivation
Since Edge Computing Platforms (e.g Cloudflare Workers, Fastly Compute@Edge, etc...) are prepared for production use, occasinally we want to server static contents on the Edge, without origin server.
To server them, it's annoying to route static assets for each paths. It occurs multiple HTTP requests and needs to bundle for each assets into runtime binary (WASM). We'd like to server more simply so we developed easy bundle tool that bundles optimized all assets into single HTML file, we dont' need to think about asset routing and also caching at the Edge for single endpoint.
unifee provides underlying features for development, local server, JavaScript (TypeScript) and CSS compiling, image optimization.
Installation
Install via npmjs.org with your favorite package manager:
$ npm install unifee$ yarn add unifeeUsage
unifee is cli tool so you can run it on npm package scripts.
Basic
<!doctype html>
<html>
<head>
...
<link rel="stylesheet" href="./styles.scss">
</head>
<body>
...
<img src="./image.png">
<script src="./script.ts"></script>
</body>
</html>On above HTML:
- Find "./styles.scss" and compile from SCSS to CSS, replace
<link>into<style>as inline - Find "./image.png" and optimize image, replace
srcattribute value as base64-encoded data-uri - Find "./script.ts" and compile from TypeScript to JavaScript, append built script as inline
Finally you will get single HTML file. See example/basic in detail.
Build yourself
Almost project has your own build system (e.g tailwindcss for CSS, webpack or swc for TypeScript) then unifee also support them. in project directory, you can define unifee spefic npm scripts like:
| script name | how it works |
|---|---|
| unifee:js | Build JavaScript for your project way |
| unifee:css | Build CSS for your project way |
If unifee finds above scripts in project directory, use it instead of unifee internal build process. See example/project in detail.
Note that if you have own build scripts, make sure the build artifact is referenced from entry HTML file.
unifee support some mimetypes and languages following table:
| Find in HTML | Language / MimeTypes | Compile / Optimize with | Bundle |
|---|---|---|---|
<script src="path/to/script.ts"></script> |
TypeScript | esbuild | inline |
<script src="path/to/script.js"></script> |
JavaScript | esbuild | inline |
<link rel="stylesheet" href="path/to/styles.scss"> |
SCSS | dart-sass | inline |
<link rel="stylesheet" href="path/to/styles.css"> |
CSS | dart-sass | inline |
<img src="path/to/image.png"> |
image/png | sharp | data-uri |
<img src="path/to/image.jpg"> |
image/jpeg | sharp | data-uri |
<img src="path/to/image.gif"> |
image/gif | sharp | data-uri |
<img src="path/to/image.svg"> |
image/svg+xml | svgo | data-uri |
CLI commands
Usage: unifee [options] <directory>
Unify assets into single HTML file
Arguments:
directory build source directory
Options:
-V, --version output the version number
-o, --output <directory> output target directory
-s, --server run dev server and watch changes (default: false)
-w, --watch watch source file change
--yarn use yarn instead of npm on project build (default: false)
-h, --help display help for commandWe show some examples following.
Simple bundle
$ npx unifee -o dist ./srcFind HTML files into src, bundles into single file and output to dist directory.
Local server, hot-reload
$ npx unifee ./src -sFind HTML files into src, bundles into single file and serve from http://localhost:4001 with hot reloading.
Watch mode
$ npx unifee ./src -wFind HTML files into src, bundles into single file with watching file changes.
Author
Yoshiaki Sugimoto sugimoto@wnotes.net
License
MIT