如何使用从 NPM 导入的 javascript 个库

How to use javascript libraries imported from NPM

上下文

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

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

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

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

我被困在哪里

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

问题

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

  1. 我知道 bootstrap < v5 取决于 Jquery 和 popper.js，但它有自己的 package.json ，这还不够吗？无论如何，我们是否必须 npm install jquery popper.js 它们，正如某些人在某些 SO 线程或其他方面所建议的那样？即使在 运行ning npm install 里面 node_module/bootstrap ？此外，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 ？然后我会有 相同的版本 被 bootstrap 开发者使用。
  3. 那怎么把想要的脚本编译成一个脚本，比如压缩之类的呢？然后我可以通过 collectstatic 函数将这些脚本放入我将所有所需静态信息分组的文件夹中。

也许我不太清楚，因为这一切都让我的头脑模糊了。

网络学

Use Sass/css within django, NPM way

Bootstrap package manager
Bootstrap import with webpack
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()
})

有什么想法吗？

问题 1 的答案，假设您有 运行 npm install bootstrap 并且您可以在 node_modules 文件夹中找到 'popper' 和 'jquery'：

注意：

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

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

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