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

Question

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

• Django 如何将 npm 模块与静态/模板一起使用
• 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

还有更多。

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

如果有人能帮助我，那将是我的一天。

谢谢！

PS 我正在使用 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_DIRSin settings.py.

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

跑步python manage.py collectstatic

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