Usage
$ ccf esm --help
Usage of ccf esm:
-config string
Config file path (default "ccf.yaml")
The ESM vendor tool downloads ES modules from CDNs (like esm.sh), bundles their dependencies, and generates an import map for local serving.
Defining Your ESM Config
Create a config file (e.g., esm.yaml):
esm-vendor:
output: public/js/vendor
import: ./js/vendor
modules:
- name: confetti
url: https://esm.sh/canvas-confetti@1.6.0
Vendoring Modules
Run:
ccf esm -config esm.yaml
This downloads the modules, their dependencies, and generates public/js/vendor/importmap.json. If a template is specified, it processes the template with the import map injected as {{.importmap}}.
Using in HTML
Add template to your config:
esm-vendor:
output: public/js/vendor
import: ./js/vendor
modules:
- name: confetti
url: https://esm.sh/canvas-confetti@1.6.0
template:
input: index.html.tpl
output: public/index.html
Then, create a template:
<!DOCTYPE html>
<html>
<head>
<script type="importmap">{{.importmap}}</script>
</head>
<body>
<button id="fire">🎉</button>
<script type="module">
import confetti from 'confetti';
document.getElementById('fire').onclick = () => confetti();
</script>
</body>
</html>
When the command is run, it will generate the template in the specified output.