如何在不安装节点的情况下在 django-admin 小部件中使用 npm 中的模块？

Question

背景

我有一个 Django 应用程序，我想为其创建一个管理小部件。 该小部件将以特定方式（如终端）显示文本。 这样应用程序管理员就可以看到来自 django 编排的分析过程的转发日志（该应用程序是django-twined ）。

为此，我想使用诸如 terminal-kit 之类的东西或其他需要npm install <whatever>的库之一

构建应用程序

该应用程序是在 docker 中构建的，我不希望整个节点堆栈最终出现在我的生产映像中。

我可以使用多阶段 docker 构建； 所以在第一阶段从 NPM 安装 node 和一个库，然后在第二阶段从node_modules复制库，但这感觉不必要地慢。

另外，因为我当时所做的只是使用与 django 应用程序捆绑在一起的原始 js 静态资产，所以我不确定如何导入模块（或者这是否可能）。

问题

• 我可以在没有节点堆栈的情况下安装 npm 模块，从而避免处理笨重的多阶段构建吗？

• 然后我怎样才能将该模块的内容import或require到 vanilla javascript 中以在 django 小部件中使用？

• 这甚至在一般情况下可能吗？ 如果它看起来像移动一座山，我会放弃，只是在那里拍一个带有等宽字体的文本区域……但如果以类似终端的方式正确处理日志突出显示和颜色，那就太好了。

Answer 1

我可以在没有节点堆栈的情况下安装 npm 模块，从而避免处理笨重的多阶段构建吗？

你可以使用像 Browserify 这样的开发工具来汇总一个 npm 包。 这可以通过使用类似以下内容的方式卷起整个包来完成：

browserify --require terminal-kit

Browserify 将解析包并创建一个 JS 文件，您可以尝试在浏览器中加载该文件。 这有一些限制，所以我建议您试验和探索 Browserify 文档。

然后我怎样才能将该模块的内容导入或要求到 vanilla javascript 中以在 django 小部件中使用？

您可以通过在后端管理类定义中包含 Django 模板文件引用来完成此操作。 在模板中，您需要包含一个 html JS 源标记，该标记指向您要加载的 JS 脚本。 Django 可以在构建时包含静态文件，您可以在构建时使用它来包含 JS 文件，然后使用本地资源引用将模板文件指向正确的位置。

这甚至在一般情况下可能吗？

一般来说，这绝对是可能的，但 YMMV。 它归结为 npm 包的复杂性以及它在浏览器中究竟要做什么。

在步骤中，我将执行以下操作：

1. 使用 Browserify 将 npm 包转换为单个 JS 文件。
2. 创建一个加载本地 JS 文件的 html 文件，在浏览器中打开它。
3. 打开控制台并查看您希望重现的命令/上下文是否在浏览器中按预期工作。 您还可以编写另一个 vanilla JS 文件并将其加载到 html 文件中进行测试。
4. 在 Django 管理模板/小部件中包含 JS 文件引用。
5. 在使用/显示全局实例化 JS 脚本的小部件中编写自定义 JS 代码。

此策略基于我的个人经验，我遵循此策略取得了成功，希望它有所帮助。