mirror of
https://github.com/nvms/esr.git
synced 2025-12-15 14:30:53 +00:00
97 lines
2.8 KiB
Markdown
97 lines
2.8 KiB
Markdown
```
|
|
|
|
░▒▓████████▓▒░░▒▓███████▓▒░▒▓███████▓▒░
|
|
░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
|
|
░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
|
|
░▒▓██████▓▒░ ░▒▓██████▓▒░░▒▓███████▓▒░
|
|
░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
|
|
░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
|
|
░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓█▓▒░
|
|
|
|
```
|
|
# esr
|
|
|
|
This is a simple esbuild-powered dev server. It has livereloading. It's fast. It's configured with YAML.
|
|
|
|
For the minimalist. For the developer who misses the old web. For the developer who is tired of configuring your build tools.
|
|
|
|
## Quickstart
|
|
|
|
```bash
|
|
# In an empty directory
|
|
$ esr init
|
|
$ esr --serve src/index.ts
|
|
esr :: Serving on http://localhost:1234
|
|
```
|
|
|
|
`src/index.ts` is bundled and included in the HTML page served at the address above.
|
|
|
|
## Example configuration
|
|
|
|
These are all defaults. You don't need to do any of this. You can if you want to, but you don't have to.
|
|
|
|
```yml
|
|
# Defaults
|
|
bundle: true
|
|
platform: browser # browser | node
|
|
format: esm # esm | cjs | iife
|
|
outdir: public
|
|
minify: false
|
|
minifyWhitespace: false
|
|
minifyIdentifiers: false
|
|
sourcemap: true
|
|
|
|
# Optional. Applies to `--serve`, or `--run --watch`.
|
|
# Files that match these paths trigger reload or rerun when they are changed.
|
|
watch:
|
|
paths: ['src/**/*.{ts,tsx,css}', 'public/index.html']
|
|
|
|
# Each mode inherits from the configuration above, but can
|
|
# override certain options as needed.
|
|
serve:
|
|
html: public/index.html
|
|
port: 1234
|
|
|
|
# When building, you might want to override some of the defaults
|
|
build:
|
|
minify: true
|
|
minifyWhitespace: true
|
|
minifyIdentifiers: true
|
|
sourcemap: false
|
|
|
|
run:
|
|
# For example: <runtime> <outfile>
|
|
runtime: bun # node | bun | ??
|
|
|
|
jsx: automatic
|
|
jsxFactory: React.createElement
|
|
|
|
# By default, loader is undefined.
|
|
# You can define loaders with the `loader` property, like this:
|
|
loader:
|
|
.js: jsx
|
|
.ts: tsx
|
|
```
|
|
|
|
When serving an index.html, you can use `{{ livereload }}` to inject the livereload EventSource logic, and `{{ js }}` and `{{ css }}` to inject tags for built assets.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Application</title>
|
|
{{ css }}
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
{{ livereload }}
|
|
{{ js }}
|
|
</body>
|
|
|
|
</html>
|
|
```
|