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

Question

这真让我抓狂。到目前为止，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
...

手动添加它并不能解决任何问题。我完全卡住了。肯定会有一些我做错的事情，但是我一直在敲打我的头很长一段时间而完全没有效率。谢谢。

Answer 1

这里有一个很长的答案，但我只有时间做一个简短的答案，我想我也可以给它而不是什么！

bower-install是一项任务，依赖于Bower包正确指定其main内的bower.json属性。最近的一些东西继续使用jQuery Bower包，它不再指定这个属性。没有，grunt-bower-install不能帮助太多。

解决方案是在HTML中的<!-- bower:js --><!-- endbower -->块之外手动包含对jQuery的引用。

抱歉沮丧。希望jQuery很快就会修复它的bower.json。

Answer 2

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

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

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

Answer 3

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

grunt wiredep

不断重新排序app / index.html中的条目。结果问题是bower.json的依赖项部分中jquery的位置。在我的例子中，jquery是bower.json中依赖项部分的第9个条目。

grunt wiredep 

然后会移动

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

到app / index.html中的＃9位置，即使我手动将它作为＃1条目或使用覆盖。

在我的情况下，jquery需要超前角度，这次重新排序是在运行时杀死我的应用程序。

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",
}

我把它放在这里，以便其他人可以使用这个解决方案，如果没有其他工作。

Answer 4

简单而恰当的解决方案是在bower.json的覆盖部分下添加此引用：就像这里我为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"
      ]
    }
  }

干杯:)