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

Posted

技术标签:

【中文标题】Django 如何使用带有静态/模板的 npm 模块【英文标题】:Django how to use npm modules with static/ templates 【发布时间】:2018-12-21 21:00:34 【问题描述】:

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

我还添加了 gulp ,但现在只能让它做 hello world 的事情。看起来很简单——它可以监视文件、缩小资产、编译 Sass。最终我可能会切换到 Webpack,但是 gulp 很简单并且现在可以工作。我不想使用 django-compressordjango-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'),
)

【问题讨论】:

【参考方案1】:

STATICFILES_DIRS 告诉 Django 在哪里可以找到所有静态资产(稍后将在部署时“收集”这些资产,但我们暂时可以忽略它)。该设置需要包含在您有 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) 或“收集”位置(./manage.py collectstatic --noinput 将所有静态文件拉到一个位置以简化服务)。

【讨论】:

以上是关于Django 如何使用带有静态/模板的 npm 模块的主要内容,如果未能解决你的问题,请参考以下文章

带有“带有模板标签”方法的 django 静态文件

如何在 django 中使用带有版本的 css 文件上的静态文件

如何在 django 2.2 的多个应用程序中使用其静态文件管理多个模板?

如何在静态文件中使用 django 模板语法

如何在 django 模板中使用 vue 库

如何使用带有 Django 模板标签的 amp CSS 星级评分?