Django 如何使用带有静态/模板的 npm 模块

Question

我最近将 npm 添加到我的项目中，以便更好地跟踪我的 js 依赖项。之前我刚刚 git 克隆到我的 static/vendor 文件夹。

我还添加了 gulp ，但现在只让它做 hello world 的事情。看起来很简单——它可以查看文件、缩小资产、编译 Sass。最终我可能会切换到 Webpack，但是 gulp 很简单并且现在可以使用。我不想使用 django-compressor 或 django-pipeline.

所以假设我运行 npm install vis 引入 visjs。它被添加到 node_modules 并且记录被添加到 package.json 依赖项。

A) 我是否在模板脚本中 node_mods 中引用了 vis/dist？

<script src="/node_modules/vis/dist/min-vis.js' %}"></script>

# right now it's <script src="{% static 'vendor/min-vis.js' %}"></script

B) 是否应该 gulp 监听对 package.json 依赖项的更改并将 vis/dist 复制到 static/vendor 或 static/js 什么时候看到变化？

我经常看到人们在谈论 npm 和 gulp 时谈论处理 STATICFILE_DIRS。现在我的设置如下。这会改变吗？

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Answer 1

STATICFILES_DIRS 告诉 Django 在哪里可以找到所有静态资产（稍后将是 "collected" 用于部署，但我们暂时可以忽略它）。该设置需要包括您 gulp 放置已处理资产的任何位置，或者您可以 gulp 将它们放入 $BASE_DIR/static 以避免更改您的设置（如果您愿意）。

从那里开始，您应该使用 static templatetag

{% load static %}
<script src="{% static 'your_bundled_asset.min.js' %}"></script>

请注意，如果您的资产位于 STATICFILES_DIRS 条目下的嵌套目录中，您可能需要为其添加前缀。 {% static 'js/asset.min.js' %}.

因此 Django 在部署时可以使用开发位置 ($BASE_DIR/static) 或 "collected" 位置（./manage.py collectstatic --noinput 将所有静态文件拉到一个位置以简化服务）。

Django 如何使用带有静态/模板的 npm 模块

Django how to use npm modules with static/ templates

django

frontend

npm

django-staticfiles

gulp