使用 Bower 安装插件后使用插件时出错答案

【问题标题】：Error Using a plugin after installing it with Bower使用 Bower 安装插件后使用插件时出错
【发布时间】：2015-07-29 13:39:10
【问题描述】：

我是一个新手（实习生），我正在使用 bootstrap/jquery 环境。

我正在尝试将password strength 功能添加到我网站的登录应用程序中。在我的登录应用程序文件夹（contact_sid）中，我使用 bower 安装了 pwdstrength 插件。这些文件存储在 bower_components 中。

现在，我正在尝试在 main.js 文件中使用 pwstrength() 函数。如 github 所示，我使用 $(':password').pwstrength(); 调用插件。当我运行应用程序时，我收到一个错误：

Uncaught TypeError: $(...).pwstrength is not a function

任何帮助将不胜感激。我认为如果我在 main.js 中复制 pwdstrength.js 函数，它可以工作（有点），但这显然是不好的做法。

【问题讨论】：

另外，如果有人好奇，这里是网络应用程序：auth.humanitarian.id
我建议您开始使用 grant 来打包您的第 3 方和您的脚本....否则，请写下 bower 中的脚本如何部署到您的应用程序....
我刚用过[bower install github.com/ablanco/jquery.pwstrength.bootstrap.git]
咕噜声也一样吗？
grunt 用于构建和部署 js、css 和 html。当将 grunt 与 bower 一起使用时，grunt 会检查写在您的 bower json 文件中的依赖项并将它们自动添加到您的 index.html 文件中

标签： javascript jquery twitter-bootstrap jquery-plugins bower

【解决方案1】：

您收到的错误意味着您的插件尚未加载，因此您正在尝试调用一个不存在的函数。

确保您在使用 jQuery 调用它之前已加载/加载“pwstrength”，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/bower_components/pwstrength.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>

查看the examples on GitHub 了解作者打算如何使用它。

另外，欢迎来到 Stack Overflow。实习没有错；每个人都从某个地方开始！ :)

【讨论】：

我在哪里加载这个？在前端（html）？非常感谢您的好话，非常感谢您的支持！
确实；要么这样，要么你可以在你的main.js 文件前面加上pwstrength.js 的内容。只需确保在调用“pwstrength”之前加载它。
我在html文件中添加了脚本，但是后端还是有问题。它说的一样：Uncaught TypeError: $(...).pwstrength is not a function...我想我会尝试将 pwdstrength.js 添加到 main.js，但这不是好的编程...对?
我解决了这个问题。需要将脚本添加到正确的 html 文件中。