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

Question

我最近添加了 npm 到我的项目，以便更好地跟踪我的 js 依赖项。以前我只是 git 克隆到我的静态/供应商文件夹。

我还添加了 吞下 ，但现在只让它做 Hello World 的事情。看起来很简单——它可以监视文件、缩小 Assets 、编译 Sass。最终我可能会切换到 Webpack，但 gulp 很简单并且现在可以工作。我不想使用 django-compressor 或 django-pipeline。

所以假设我运行 npm install vis拉入visjs。它被添加到 node_modules并将一条记录添加到 package.json依赖关系。

一)我是否在模板脚本的 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 在哪里可以找到所有静态 Assets (稍后将被“收集”以进行部署，但我们暂时可以忽略它)。该设置需要包括您拥有的任何位置gulp放置已处理的 Assets ，或者您可以让 gulp 将它们放入 $BASE_DIR/static如果您愿意，可以避免更改您的设置。

从那里，您应该使用 static templatetag

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

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

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