Django 如何使用从NPM导入的javascript库 上下文

很长一段时间以来，我一直在使用Bootstrap和其他源代码库。我的意思是我把它包括在下面：

- static
   - vendor
       - jquery
       - popper
       - bootstrap
       - ...

但是现在，我需要在管理我的web依赖性方面提高自己。出于某些原因：

• 存储库中的资源更少，团队项目效率更高
• 更好地支持选择版本或测试迁移
• 为具有相同依赖项的后续项目节省时间
• 我需要包括一个图书馆，这是只通过NPM提供的，这是

因此，我目前正试图通过NPM在一个django项目中管理依赖关系。但我想我被困在了一个非常基本的步骤上。我不知道在

npm安装后在哪里继续——保存jquery popper.js引导程序

。我被node.js应用程序的所有示例所困扰

我被困的地方 我有一个

index.js

，与我的主

package.json

处于同一级别。我想我必须在这个文件中导入我的脚本，然后在我的页面中包含这个脚本。因此，我尝试先要求Jquery，然后再要求引导，但我在要求引导时出错，因为

Jquery

未定义。
我没有太多的代码要显示，我更需要的是一步一步地理解它是如何工作的，而不是让它完成给我

---

问题 我的主要目标是管理我的主要Java脚本，我的意思是必须在整个站点中显示的脚本。将它们包装成一个脚本，然后将该脚本包含在我的

base.html

中，假设我在django项目中

我知道bootstrap依赖于Jquery和popper.js，但它附带了自己的package.json，这还不够吗？我们是否必须像一些人在某个SO线程中建议的那样

npm安装jquery popper.js

它们？即使在运行

npm之后，也要在
node\u模块/bootstrap中安装
？另外，
bootstrap.bundle.js
包含popper.js，bootstrap中的node_模块包含jquery为什么不使用它们？请参见否则，它们为什么在那里

如何绑定我的javascript依赖项？通过网页？例如，使用

bootstrap/dist/js/bootstrap.bundle.js

从

bootstrap/node\u modules/Jquery/dist/Jquery.js

执行Jquery？然后我将拥有与引导开发人员使用的相同版本

那么，如何将想要的脚本编译成一个脚本，并将其缩小？然后，我可以通过

collectstatic

函数将这些脚本放入文件夹，在那里我将所有需要的静态数据分组

也许我不清楚，因为这一切模糊了我的思想

---

网志

---

随着我的进步 package.json webpack-conf.js index.js npm运行构建 结果 目前，我设法将此捆绑包包含到我的站点中，但出现了一个错误，它似乎不包括Jquery:

ReferenceError:$未定义

。值得注意的是，它出现在这个代码段上，例如：

$(function () {
    $('[data-toggle="popover"]').popover()
    $('[data-toggle="tooltip"]').tooltip()
})

---

有什么想法吗？

回答问题1，假设您已经运行了

npm install bootstrap

，并且可以在node_modules文件夹中找到“popper”和“jquery”：

• 添加

  导入“引导”在index.js（）中

注:

如果在node_modules文件夹中找不到'popper'和'jquery'，那么使用

npm install@popperjs/core

&

npm install jquery

如果出于某种原因必须手动安装popper和jQuery，那么从“jQuery”添加

import$&
从'@popperjs/core'导入{}在index.js中

---

我找到了一个很好的解决办法

webpack-conf.js index.js

---

然后导入这个脚本就可以了。多亏了@karanver，我的头脑才清醒过来，让我走上了正确的道路。如果这对你有帮助，一定要告诉我！（我认为您从'bootstrap'导入$时出错；应该是从'jquery'导入的

，

对吧？正如我在bootstrap文档中看到的那样，我确实尝试了

导入'bootstrap

。）但是，我尝试通过

节点索引.js运行此脚本，并导致了一个错误。如果我错了，请纠正我的错误，这是我不应该尝试运行脚本的地方？让我们再看一次，1.你是对的，它应该是
从'jquery'导入$
，我已经对输入错误进行了编辑：）2。您仍然需要在app.js而不是webpack.conf.js中导入“脚本”。一个很好的参考是我们如何在react web应用程序上导入引导。尝试以类似的方式应用于代码库。参考资料（附：这些是指react引导包）：嗯，我分析了你的链接，然后我去了网页包文档，最后我找到了如何捆绑的方法。但是，我得到的
$没有定义
，看起来Jquery没有正确导入。我不知道我遗漏了什么（我将用代码编辑我的答案），我很高兴它成功了！谢谢你提到我，我也学到了一些新东西！另外，如果你认为我们的谈话帮助你找到了解决办法，请随意给我的答案投赞成票，这对我也有帮助：D
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'dist/bootstrap-bundle.js' }
};

import $ from 'jquery';
import {} from 'popper.js';
import 'bootstrap'

> npx webpack -c webpack-conf.js

[webpack-cli] Compilation finished
asset dist/bootstrap-bundle.js 169 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1.13 KiB 5 modules
cacheable modules 508 KiB
  ./index.js 71 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
  ./node_modules/bootstrap/dist/js/bootstrap.js 140 KiB [built] [code generated]
  ./node_modules/popper.js/dist/esm/popper.js 86.4 KiB [built] [code generated]
webpack 5.6.0 compiled successfully in 4541 ms

$(function () {
    $('[data-toggle="popover"]').popover()
    $('[data-toggle="tooltip"]').tooltip()
})

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './index.js',
    output: {path: __dirname, filename: 'dist/bootstrap-bundle.js'},
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
};

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import {} from 'popper.js';
import 'bootstrap'