如何使用从NPM导入的JavaScript库

语境

长期以来，我一直在按来源使用Bootstrap和其他库。我的意思是我包括以下内容：

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

但是如今，我需要在管理Web依赖项方面提高自己。由于某些原因：

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

所以我目前正在django项目中尝试通过NPM管理依赖项。但我被困在一个非常基本的一步我猜。我不知道在哪里继续后npm install --save jquery popper.js bootstrap。我对所有用于node.js应用程序的示例感到不安...

我被困在哪里

我有一个index.js在我的主要的相同水平package.json。我以为我必须将脚本导入此文件中，然后将此脚本包含在页面中。所以我试过先要求先使用Jquery然后进行引导，但是由于jquery未定义，我在必需的引导上收到错误。
我没有太多要显示的代码，我需要做的更多的是逐步了解它的工作原理，而不是亲自完成。

---

问题

我的主要目标是管理我的主要JavaScript，这是指必须在整个网站中出现的脚本。将它们包装成一个脚本，然后base.html假设我在django项目中，则将此脚本包括在内。

1. 我知道bootstrap <v5取决于Jquery和popper.js，但是它带有自己的package.json，还不够吗？npm install jquery popper.js正如某些人在某些SO线程中建议的那样，我们还是必须要他们吗？甚至在npm install里面跑了以后node_module/bootstrap？此外，bootstrap.bundle.js包含popper.js，而引导程序内的node_modules也包含jquery。为什么不使用那些？ 请参阅使用webpack进行Bootstrap导入，否则为什么会出现它们？
2. 如何捆绑我的javascript依赖项？通过webpack吗？例如，bootstrap/node_modules/jquery/dist/jquery.js带有bootstrap/dist/js/bootstrap.bundle.js？的Jquery 然后，我将拥有引导程序开发人员使用的相同版本。
3. 然后如何将所需的脚本编译成一个脚本，并使其最小化？然后，我可以按collectstatic功能将这些脚本放入将所有所需的静态变量分组的文件夹中。

也许我不清楚，因为所有这些都使我头脑模糊。

---

网路摄影

在django中以NPM方式使用Sass / css
通过NPM在django项目中添加反应。Bootstrap
程序包管理器
使用webpack进行Bootstrap导入Npm install jquery，poper，bootstrap
React with webpack

---

版本与我的进步

package.json

{
  "name": "static_src",
  "version": "1.0.0",
  "description": "Static files from NPM.",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack -c webpack-conf.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.5.3",
    "codemirror": "^5.58.2",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  },
  "devDependencies": {
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

webpack-conf.js

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

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

index.js

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

npm运行构建

> 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

结果

好了，现在我管理，包括这个包到我的网站，但有错误发生，似乎不包括jQuery的：ReferenceError: $ is not defined。值得注意的是，它出现在此代码段中，例如：

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

任何想法 ？