Django如何在静态/模板中使用npm模块

Question

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

我还添加了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'),
)

- Kermit

Answer 1

STATICFILES_DIRS 是告诉Django静态文件位于哪里的设置项（稍后将为部署“收集”静态文件，但我们现在可以忽略这个）。此设置需要包括您使用gulp处理的静态文件所在位置，或者您可以让gulp将它们放到$BASE_DIR/static中，以避免更改设置。

从那里开始，您应该使用static模板标签

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

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

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

- nerdwaller