bower 或 grunt 不断从 index.html 中删除 jquery答案

【问题标题】：bower or grunt keeps removing jquery from index.htmlbower 或 grunt 不断从 index.html 中删除 jquery
【发布时间】：2014-02-18 18:50:07
【问题描述】：

这快把我逼疯了。到目前为止，Bower+Grunt（通过 Yeoman）一直是挫败感和浪费时间的主要来源。我只想让我的应用使用最新 (2.1.0) 版本的 jquery。

bower list 正确地将 jquery 2.1.0 报告为官方更新。

我运行bower install --save jquery 更新到最新版本，它确实做到了。

bower list 命令现在可以正确地将jquery#2.1.0 报告为依赖项，并且 bower.json 文件现在可以正确列出带有所需版本的 jquery 作为依赖项：

{
  "name": "xxx",
  "version": "0.0.0",
  "dependencies": {
    ...
    "angular": "1.2.13",
    "jquery": "~2.1.0",
    "sizzle": "1.10.16",
    "bootstrap": "~3.0.3",
    ...

但每次我运行 grunt build 或 grunt serve 时，<script src="bower_components/jquery/dist/jquery.js"></script> 列表都会从 index.html 中删除，从而阻止整个应用程序运行。

#> grunt serve
Running "serve" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "bower-install:app" (bower-install) task

jquery was not injected in your file.
Please go take a look in "app/bower_components/jquery" for the file you need, then manually include it in your file.

Running "concurrent:server" (concurrent) task
...

手动添加并不能解决任何问题。我完全被困住了。一定有什么我做错了，但我一直在敲我的头很长一段时间，而完全没有生产力。谢谢。

【问题讨论】：

标签： jquery gruntjs bower

【解决方案1】：

这里有一个很长的答案，但我只有一个简短的时间，我想我不妨给出这个而不是什么都不做！

bower-install 是一项任务，它依赖于 Bower 包在其 bower.json 中正确指定 main 属性。 jQuery Bower 包最近发生了一些事情，它不再指定这个属性。如果没有，grunt-bower-install 也无济于事。

解决方案是在 HTML 的  块之外手动包含对 jQuery 的引用。

很抱歉让您失望了。希望 jQuery 能尽快修复它的 bower.json。

【讨论】：

非常感谢您的宝贵时间！在我的调查中，我确实尝试在 JQuery 的 bower.json 中添加缺少的主要部分，但无济于事。我目前的“解决方案”（因为我想保住我的工作）是按照您正确的建议将脚本包含移动到 HTML 中的凉亭控制块之外。
Stephen，我刚刚意识到你是 grunt-bower-install 的作者。再次感谢您的帮助。
呃，ACE 编辑器有这个问题（ace-builds 没有 bower.json 并从 index.html 中删除......而 angular-ui-ace 很好）。不喜欢解决方法，但我想这是目前最好的：-/
使用此解决方案可能会导致grunt build 出现问题。
其他库也会发生这种情况吗？我做了一个 bower install --save ui-router 并且每次我运行 grunt serve 时它也会从我的 index.html 中删除，即使它在 bower.json 中看起来正确现在我只是将参考放在其他地方但是这个错误的行为确实削弱了使用 bower 的实用性

【解决方案2】：

这里有一个更好的解决方案，它不会强迫您将脚本标签从其他 bower 组件中移开。您可以使用overrides 部分（在https://github.com/ajaxorg/ace-builds/issues/20 上找到）

将以下部分添加到您项目的bower.json

...
"overrides": {
    "jquery": {
        "main": "dist/jquery.js"
    }
}

【讨论】：

在 ngcordova 的情况下它对我没有帮助 - 我有 bower.json: { .. "overrides": { "bootstrap": { "main": [ "less/bootstrap.less", “dist/css/bootstrap.css”、“dist/js/bootstrap.js”]}、“ngCordova”：{“main”：[“dist/js/ng-cordova.js”]}}}

【解决方案3】：

几分钟前，我在 grunt + yeoman + bower 中看到了同样的问题。就我而言，“覆盖”解决方案不起作用。

grunt wiredep

继续重新排序 app/index.html 中的条目。问题原来是 jquery 在 bower.json 的依赖项部分中的位置。就我而言，jquery 是 bower.json 中依赖项部分的第 9 个条目。

grunt wiredep

然后会移动

<script src="bower_components/jquery/dist/jquery.js"></script>

到 app/index.html 中的位置 #9，即使我手动将其设为 #1 条目或使用了覆盖。

在我的情况下，jquery 需要领先于 angular，这种重新排序在运行时杀死了我的应用程序。

我在 bower.json 中的依赖项部分看起来像这样之前：

"dependencies": {
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "jquery": "^2.2.3",
},

现在，它看起来像这样（注意 jquery 如何重新定位到位置 #1）。

"dependencies": {
    "jquery": "^2.2.3",
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
}

我把它放在这里是为了让其他人可以使用这个解决方案，如果没有其他方法的话。

【讨论】：

您使用的是什么版本的 grunt？我的 grunt 3.10.5 也出现了同样的情况，但是 3.10.3 似乎没有这个问题。

【解决方案4】：

简单而正确的解决方案是在 bower.json 中的 overrides 部分下添加此引用：就像这里我为 jquery-ui 添加的一样。

"overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    },
    "jquery-ui": {
      "main": [
        "themes/base/jquery-ui.css",
        "ui/jquery-ui.js"
      ]
    }
  }

干杯:)

【讨论】：