Django的轻量级JavaScript ESM模块加载器。
项目描述
Django ESM
下一代Django的JavaScript ESM模块支持。
亮点
- 易于过渡
- 智能缓存清除
- 不再捆绑
- 原生ESM支持
- 使用npm的本地供应商
设置
安装包并将其添加到您的INSTALLED_APPS设置中
pip install django-esm
# settings.py
INSTALLED_APPS = [
# …
'django_esm',
]
接下来，将新的staticfiles查找器添加到您的STATICFILES_FINDERS设置中
# settings.py
STATICFILES_FINDERS = [
# Django's default finders
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
# django-esm finder
"django_esm.finders.ESMFinder",
]
您还需要将您的node_modules目录暴露给Django的staticfiles查找器。在运行collectstatic之前，您可以运行npm ci --omit=dev以避免公开您的devDependencies。
# settings.py
from pathlib import Path
# add BASE_DIR (if not already present)
BASE_DIR = Path(__file__).resolve().parent.parent
STATICFILES_DIRS = [
# …
BASE_DIR / "node_modules",
]
最后，将导入映射添加到您的基本模板中
<!-- base.html -->
<!DOCTYPE html>
{% load esm %}
<html lang="en">
<head>
<script type="importmap">{% importmap %}</script>
</head>
</html>
就是这样！别忘了运行 npm install 和 python manage.py collectstatic。
用法
您现在可以在Django模板中导入JavaScript模块了
<!-- index.html -->
{% block content %}
<script type="module">
import "htmx.org"
htmx.logAll()
</script>
{% endblock %}
私有模块
您还可以从您的Django应用程序中导入私有模块
<!-- index.html -->
{% block content %}
<script type="module">
import "#myapp/js/my-module.js"
</script>
{% endblock %}
要导入私有模块，请将模块名称前缀为 #。您需要在您的 package.json 文件中定义您的私有模块
{
"imports": {
"#myapp/script": "./myapp/static/js/script.js",
// You may use trailing stars to import all files in a directory.
"#myapp/*": "./myapp/static/js/*"
}
}
测试（使用Jest）
您可以使用 django_esm 包使用Jest测试您的JavaScript模块。Jest v27.4及以上版本将尊重您的 package.json 文件中的 imports。
在v27.4之前，您可以尝试使用自定义的 moduleNameMapper，如下所示
// jest.config.js
module.exports = {
// …
moduleNameMapper: {
'^#(.*)$': '<rootDir>/staticfiles/js/$1' // @todo: remove this with Jest >=29.4
},
}
工作原理
Django ESM通过现代浏览器中的原生JavaScript模块支持来工作。它使用 import map 将模块名称映射到服务器上的位置。
以下是一个导入映射示例
{
"imports": {
"htmx.org": "/static/htmx.org/dist/htmx.min.js"
}
}
下载文件
下载适用于您平台的文件。如果您不确定选择哪个，请了解有关 安装包 的更多信息。
源分布
django_esm-0.4.2.tar.gz (6.3 kB 查看哈希值)
构建分布
django_esm-0.4.2-py3-none-any.whl (7.6 kB 查看哈希值)
