如何在应用程序中将 NPM 模块与 Django 一起使用？

Question

我有一个包含 2 个应用程序的 Django 项目。我想在其中一个应用程序中使用 Notion API，所以我必须安装它的 NPM 模块。但是，我从来没有使用过 NPM 或捆绑器（我知道我必须使用一个作为 import 语句）。 我不知道该怎么做。我应该在哪里安装模块？我应该安装 Webpack 还是类似的东西？如何将这两种技术与 Django 集成？
有人可以向我解释一下，或者参考文章/视频解释吗？
我已经尝试了几个小时，但找不到任何详细信息。
我检查了以下链接：

• Django how to use npm modules with static/ templates
• https://gist.github.com/brizandrew/685a588fbefbd64cd95ed9ec4db84848
• https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
• https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
• https://www.techiediaries.com/django-webpack-react/
• https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
• https://pythonrepo.com/repo/owais-django-webpack-loader-python-developing-restful-apis

还有更多。

他们要么没有我需要的东西（他们是为了反应），要么我无法理解他们。我知道可能有很多关于这方面的文章，但要么我找不到它们，要么它们对我来说太复杂了（对不起，我很笨）。

如果有人可以帮助我，我会很开心。

谢谢！

附：我正在使用 Typescript，但如果需要，我可以使用 vanilla JS。

Answer 1

为了让您的应用按照您想要的方式运行，您需要做两件事。

1. 安装、配置和运行模块捆绑器
2. 使用collectstatic

模块捆绑器：

你有几个选择，但大多数都使用 webpack，因为它是最流行的。我更喜欢汇总，但这完全取决于偏好。

汇总快速入门：https://rollupjs.org/guide/en/#quick-start

webpack：https://webpack.js.org/concepts/

由于您使用的是 Typescript，请参阅捆绑 Typescript 的插件

https://webpack.js.org/guides/typescript/

https://github.com/rollup/rollup-plugin-typescript

捆绑后，您应该有一个main.js 文件或等效文件。确保main.js 在它自己的文件夹中。打包程序通常会为您执行此操作。

将该目录添加到您的STATICFILES_DIRS 中的settings.py。

请注意，您需要设置 STATIC_ROOT 才能使其正常工作。这将是一个文件夹，您将在其中存储收集的静态文件。

运行python manage.py collectstatic

旁注：如果您使用python manage.py runserver 启动应用程序，则无需运行collectstatic