Lightweight JavaScript ESM module loader for Django.
Project description
Django ESM
NextGen JavaScript ESM module support for Django.
Highlights
- easy transition
- smart cache busting
- no more bundling
- native ESM support
- local vendoring with npm
Setup
Install the package and add it to your INSTALLED_APPS setting:
pip install django-esm
# settings.py
INSTALLED_APPS = [
# …
'django_esm',
]
Next, add the node_modules directory to your staticfiles directories:
# settings.py
STATICFILES_DIRS = [
BASE_DIR / "node_modules",
]
Finally, add the import map to your base template:
<!-- base.html -->
<!DOCTYPE html>
{% load esm %}
<html lang="en">
<head>
<script type="importmap">{% importmap %}</script>
</head>
</html>
That's it!
Don't forget to run npm install and python manage.py collectstatic.
Usage
You can now import JavaScript modules in your Django templates:
<!-- index.html -->
{% block content %}
<script type="module">
import "htmx.org"
htmx.logAll()
</script>
{% endblock %}
How it works
Django ESM works via native JavaScript module support in modern browsers. It uses the import map to map module names to their location on the server.
Here is an example import map:
{
"imports": {
"htmx.org": "/static/htmx.org/dist/htmx.min.js"
}
}
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
django_esm-0.1.2.tar.gz
(4.4 kB
view hashes)
Built Distribution
Close
Hashes for django_esm-0.1.2-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | a1c0f012ef12bb2686a01638137a71238727725a6f7a9806d835fe39248c839e |
|
| MD5 | a2ef75bfa932e6bf996713432e16e624 |
|
| BLAKE2b-256 | cac375cebd5a99dba250bdee4577bc2872806b347494f47d9cd94d57d1d7c071 |
