为 Meteor twbs:bootstrap 指定 jQuery 版本

Question

在 Windows 10 上通过 Chocolatey 安装 Meteor 后，meteor add twbs:bootstrap 这个 Meteor 应用程序给出了一个 barowser 错误

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery 版本 1.9.1 或更高，但低于版本 3

那么我现在运行的是哪个版本？

meteor list 没有产生任何与 jquery 相关的行。

./meteor/versions 文件有一行写着"jquery@1.11.11"

但是meteor create 不是已经按照web site 安装了一个jQuery 吗？ "这个包会自动包含在每个新的 Meteor 应用程序中，由流星创建。"

我需要运行meteor add jquery 吗？但我记得至少已经这样做了一次。而"jquery": "^3.5.1" 在packages.json 和package-lock.json 的依赖项下

命令：meteor show jquery 显示包：jquery@3.0.0

请帮助解决这个问题。谢谢

已解决：

meteor remove twbs:bootstrap
npm install bootstrap

将"popper.js":"^1.16.0"添加到package.json中的依赖项

Answer 1

Meteor 包版本 jquery@3.0.0 和 npm 版本 `"jquery": "^3.5.1" 之间存在差异。

Meteor 包jquery@3.0.0 允许使用通过 npm 安装的 jQuery 版本覆盖已弃用的 jQuery 版本（例如作为旧 Meteor 包的直接依赖项交付）。

./meteor/versions 文件有一行写着"jquery@1.11.11"

注意，仅仅添加jquery@3.0.0 有时会失败（当包需要直接依赖时）。然后您必须将您的.meteor/packages 条目jquery@3.0.0 更改为jquery@3.0.0!

但是，这仍然可能导致上述错误，因为您的 jQuery 版本将 > 3（因为您的项目将使用 npm jQuery 3.5.1）。

您有哪些解决错误的选择：

• a) 安装 npm jquery > 1 和
• b) 安装最新的 jQuery 并通过 npm 使用 Bootstrap 4

选项a

第一个选项基本上要求您运行meteor npm install --save jquery@2.2.4 以获取最新的jQuery

这可能是一个快速的解决方案，如果您的应用程序将在内部使用（例如在公司 Intranet 或 smth 中），但如果在野外使用将是一个大问题。自3.5.1 以来已检测到plenty of vulnerabilities，您应该考虑一下，这是否会成为问题。

选项 b

更好的方法是从一开始也使用最新的引导程序和 jQuery 并使用它们的 npm 包。这比添加 twbs:bootstrap 需要更多的工作，但它为您提供了所需的灵活性和可维护性：

1. 安装最新的 npm 包

$ meteor remove twbs:botstrap
$ meteor npm install --save jquery@latest bootstrap popper.js

1. 编辑 Meteor jquery 包

在您选择的编辑器中打开 .meteor/packages 并进行更改：

jquery@3.0.0 到 jquery@3.0.0!

1. 导入包

在您的启动例程中，例如在client/main.js 中，您执行以下操作：

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css' // default theme
import popper from 'popper.js'

global.Popper = global.Popper || popper

1. （可选）导入自定义主题

如果你想应用自己的主题，你也可以安装scss toolchain:

$ meteor remove standard-minifier-css
$ meteor add fourseven:scss seba:minifiers-autoprefixer

然后导入您的自定义主题而不是标准 css：

import 'bootstrap'
import popper from 'popper.js'
import './theme.scss'

global.Popper = global.Popper || popper

要应用您自己的主题，您需要拥有theme.scss 以遵循以下结构：

/* import the necessary Bootstrap files */
@import "{}/node_modules/bootstrap/scss/functions";
@import "{}/node_modules/bootstrap/scss/variables";
@import "{}/node_modules/bootstrap/scss/mixins/buttons";
/* these are just examples, if your theme overrides more you need to import the respective files */

/* -------begin customization-------- */

/* here your custom theme variables, colors etc. */

/* ------- end customization -------- */

/* finally, import Bootstrap to set the changes! */
@import "{}/node_modules/bootstrap/scss/bootstrap.scss";

我知道这可能是一个太多的答案，但从长远来看，我强烈建议您忽略已弃用的 BS3 并采用更灵活的策略，如此处的选项 b 所示。