django - 如何使用从 NPM 导入的 javascript 库

问题描述

语境

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

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

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

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

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

我被困在哪里

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

问题

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

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

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

网志

在 django 中使用 Sass/css，NPM 方式
 在 django 项目中添加 react，通过 NPM
Bootstrap 包管理器
 Bootstrap import with webpack Npm install jquery, poper, bootstrap
React with webpack

有我进步的版本

包.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()
})

任何想法？

标签： djangotwitter-bootstrapnpmwebpackbundle