为 Meteor twbs:bootstrap 指定一个 jQuery 版本

Question

在 windows 10 上通过 Chocolatey 安装 Meteor 后，meteor add twbs:bootstrap 此 Meteor 应用出现浏览器错误

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

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

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

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

但是 meteor create 不是已经根据 web site 安装了 jQuery 吗？ “这个包由 meteor create 自动包含在每个新的 Meteor 应用程序中。”

我需要运行 meteor add jquery 吗？但我记得至少做过一次。 "jquery": "^3.5.1" 依赖于 packages.json 和包-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 允许使用 jQuery 版本覆盖已弃用的 jQuery 版本（例如作为旧 Meteor 包的直接依赖项提供），通过 npm 安装。

./meteor/versions file has a line saying "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 和 < 3
b) 安装最新的 jQuery 并通过 npm

选项a

第一个选项基本上需要您运行 meteor npm install --save jquery@2.2.4 以获得最新的 jQuery < 3.

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

选项 b

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

安装最新的 npm 包

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

编辑 Meteor jquery 包

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

jquery@3.0.0 到 jquery@3.0.0!

导入包

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

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

global.Popper = global.Popper || popper

（可选）导入自定义主题

如果你想应用你自己的主题，你也可以安装 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 所示。

为 Meteor twbs:bootstrap 指定一个 jQuery 版本

Specifing a jQuery version for Meteor twbs:bootstrap

javascript

jquery

meteor