Django 如何使用带有静态/模板的 npm 模块 [英] Django how to use npm modules with static/ templates

问题描述

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

I have recently added npm to my project in order to keep better track of my js dependencies. Previously I have just been git cloning to my static/vendor folder.

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

I've also added gulp , but have only got it doing hello world things right now. It seems simple enough - it can watch files, minify assets, compile Sass. Eventually I will probably switch to Webpack, but gulp is simple and working for now. I don't want to use django-compressor or django-pipeline.

假设我运行 npm install vis 来引入 visjs.它被添加到 node_modules 中，并且一条记录被添加到 package.json 依赖项中.

So let's say I run npm install vis to pull in visjs. It gets added to node_modules and a record is added to package.json dependencies.

A) 我是否在模板脚本的 node_mods 中正确引用了 vis/dist?

A) Do I reference vis/dist right where it is in node_mods in my template scripts?

<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?

B) Should gulp be listening for changes to package.json dependencies and replicating vis/dist to static/vendor or static/js when it sees changes there?

我经常看到人们在谈论 npm 和 gulp 时谈论处理 STATICFILE_DIRS.现在我的只是设置为以下.这会改变吗?

I keep seeing people talking about handling STATICFILE_DIRS when they talk about npm and gulp. Right now mine is just set to the following. Will this change?

STATIC_URL = '/static/'

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

推荐答案

STATICFILES_DIRS 告诉 Django 在哪里可以找到所有静态资产(稍后将收集"用于部署，但我们可以忽略暂时这样).该设置需要包含 gulp 放置已处理资产的任何位置，或者您可以让 gulp 将它们放入 $BASE_DIR/static 以避免根据需要更改设置.

STATICFILES_DIRS tells Django where to find all the static assets (which will later be "collected" for a deployment, but we can ignore that for the moment). That setting will need to include wherever you have gulp placing the processed assets, or you can have gulp put them into $BASE_DIR/static to avoid changing your setting if you prefer.

从那里，您应该使用 静态模板标签

From there, you should be using the static templatetag

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

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

Note that if your asset is in a nested directory under the STATICFILES_DIRS entry it is under, you may need to prefix that. {% static 'js/asset.min.js' %}.

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

So Django can use the dev location ($BASE_DIR/static) or the "collected" location when deployed (./manage.py collectstatic --noinput pulls all static files to one location for simplified serving).

这篇关于Django 如何使用带有静态/模板的 npm 模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！