如何在应用程序中将 NPM 模块与 Django 一起使用？
How can I use NPM modules with Django inside an app?
我有一个包含 2 个应用程序的 Django 项目。我想在其中一个应用程序中使用概念 API，所以我必须安装它的 NPM 模块。但是，我从未使用过 NPM 或捆绑器（我知道我必须为 import 语句使用一个）。
我不知道该怎么做。我应该在哪里安装模块？我应该安装 Webpack 或类似的东西吗？如何将这两种技术与 Django 集成？
有人可以向我解释一下吗，或者参考 article/video 解释？
我已经尝试了几个小时，但找不到任何详细信息。
我检查了以下链接：
- 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
还有更多。
他们要么没有我需要的东西（他们是为了反应），要么我就是不理解他们。我知道可能有很多关于这方面的文章，但要么我找不到它们，要么它们对我来说太复杂了（抱歉我很笨）。
如果有人能帮助我，那将是我的一天。
谢谢！
P.S。我正在使用 Typescript，但如果需要，我可以使用 vanilla JS。
为了让您的应用按您希望的方式运行，您需要做两件事。
- 安装、配置和运行模块捆绑器
- 使用
collectstatic
模块打包器：
你有几个选择，但大多数使用 webpack，因为它是最流行的。我更喜欢汇总，但这完全取决于偏好。
汇总快速入门：https://rollupjs.org/guide/en/#quick-start
网络包：https://webpack.js.org/concepts/
由于您使用的是 Typescript，请参阅捆绑 Typescript 的插件
https://webpack.js.org/guides/typescript/
https://github.com/rollup/rollup-plugin-typescript
捆绑后，您应该有一个 main.js 文件或等效文件。确保 main.js 在其自己的文件夹中。捆绑商通常会为您做这件事。
将该目录添加到 settings.py 中的 STATICFILES_DIRS。
请注意，您需要设置 STATIC_ROOT 才能正常工作。这将是一个文件夹，您将在其中存储收集的静态文件。
运行 python manage.py collectstatic
旁注：如果您使用 python manage.py runserver 启动您的应用程序，则不需要 运行 collectstatic
我有一个包含 2 个应用程序的 Django 项目。我想在其中一个应用程序中使用概念 API，所以我必须安装它的 NPM 模块。但是，我从未使用过 NPM 或捆绑器（我知道我必须为 import 语句使用一个）。
我不知道该怎么做。我应该在哪里安装模块？我应该安装 Webpack 或类似的东西吗？如何将这两种技术与 Django 集成？
有人可以向我解释一下吗，或者参考 article/video 解释？
我已经尝试了几个小时，但找不到任何详细信息。
我检查了以下链接：
- 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
还有更多。
他们要么没有我需要的东西（他们是为了反应），要么我就是不理解他们。我知道可能有很多关于这方面的文章，但要么我找不到它们，要么它们对我来说太复杂了（抱歉我很笨）。
如果有人能帮助我，那将是我的一天。
谢谢！
P.S。我正在使用 Typescript，但如果需要，我可以使用 vanilla JS。
为了让您的应用按您希望的方式运行，您需要做两件事。
- 安装、配置和运行模块捆绑器
- 使用
collectstatic
模块打包器：
你有几个选择，但大多数使用 webpack，因为它是最流行的。我更喜欢汇总，但这完全取决于偏好。
汇总快速入门：https://rollupjs.org/guide/en/#quick-start
网络包：https://webpack.js.org/concepts/
由于您使用的是 Typescript，请参阅捆绑 Typescript 的插件
https://webpack.js.org/guides/typescript/
https://github.com/rollup/rollup-plugin-typescript
捆绑后，您应该有一个 main.js 文件或等效文件。确保 main.js 在其自己的文件夹中。捆绑商通常会为您做这件事。
将该目录添加到 settings.py 中的 STATICFILES_DIRS。
请注意，您需要设置 STATIC_ROOT 才能正常工作。这将是一个文件夹，您将在其中存储收集的静态文件。
运行 python manage.py collectstatic
旁注：如果您使用 python manage.py runserver 启动您的应用程序，则不需要 运行 collectstatic