如何使用从 NPM 导入的 javascript 库

Question

上下文

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

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

但现在，我需要提高自己管理网络依赖项的能力。由于某些原因：

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

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

我被困在哪里

我有一个index.js，与我的主要package.json 处于同一级别。我想我必须在这个文件中导入我的脚本，然后在我的页面中包含这个脚本。所以我尝试了 require Jquery 然后 bootstrap，但我在 bootstrap 上遇到错误，因为 jquery 未定义。
我没有太多代码要展示，我更需要的是逐步了解它是如何工作的，而不是让我自己去做。

---

问题

我的主要目标是管理我的主要 javascript，我的意思是必须出现在整个网站上的脚本。将它们包装成一个脚本，然后将此脚本包含在我的base.html 中，假设我在一个 django 项目中。

1. 我知道bootstrap 依赖于 Jquery和popper.js，但是它自带了package.json，这还不够吗？无论如何，我们是否必须npm install jquery popper.js他们，正如某些人在某些SO线程中所建议的那样？即使在 node_module/bootstrap 内运行 npm install 之后？此外，bootstrap.bundle.js 包含 popper.js，并且 bootstrap 中的 node_modules 包含 jquery。 为什么不使用这些？ 请参阅Bootstrap import with webpack 否则为什么会有它们？
2. 如何捆绑我的 javascript 依赖项？通过 webpack ？例如，来自 bootstrap/node_modules/jquery/dist/jquery.js 的 Jquery 和 bootstrap/dist/js/bootstrap.bundle.js ？然后我将拥有引导开发人员使用的相同版本。
3. 那么如何将想要的脚本编译成一个脚本，并缩小例如？然后我可以通过collectstatic 函数将这些脚本放入我将所有想要的静态数据分组的文件夹中。

也许我不是很清楚，因为这一切都让我迷糊了。

---

网络摄影

Use Sass/css within django, NPM way
Add react in django project, via NPM
Bootstrap package manager
Bootstrap import with webpack 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。值得注意的是，它发生在这个 sn-p 上：

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

有什么想法吗？

Answer 1

回答 Q1，假设您已运行 npm install bootstrap 并且您可以在 node_modules 文件夹中找到“popper”和“jquery”：

• 在 index.js 中添加 import 'bootstrap'; (https://getbootstrap.com/docs/4.0/getting-started/webpack/)

注意：

1. 如果在 node_modules 文件夹中找不到 'popper' 和 'jquery'，那么值得使用 npm install @popperjs/core 和 npm install jquery 通过 npm 安装它们
2. 如果你因为某种原因不得不手动安装 popper 和 jQuery，那么在你的 index.js 中添加 import $ from 'jquery'; & import {} from '@popperjs/core';

Answer 2

我找到了一个很好的解决方案！

webpack-conf.js

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'
        })
    ]
};

index.js

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

然后导入此脚本效果很好。感谢@Karanveer，让我的思路清晰，让我走上了正确的道路。还有这个thread about webpack issues