打包 jquery 和 bootstrap答案

【问题标题】：Packaging jquery and bootstrap打包 jquery 和 bootstrap
【发布时间】：2012-03-29 16:35:47
【问题描述】：

对于使用 jquery 或 bootstrap 来安装这些依赖项的项目，有哪些常用和方便的方法？

我正在编写一个 Web 应用程序，它在服务器端使用 Django，在客户端使用 jquery 和 bootstrap。自动安装 Python 依赖项的主题已经很好地涵盖了，至少有两个合理的选项（Pip 和 Buildout）。但我找不到任何信息如何最好地安装前端依赖项。

最终目标是只用两个命令配置开发环境： 1.git结账 2. 下载和安装所有依赖项的设置：Python stuff + jquery + bootstrap。

【问题讨论】：

为什么不将 Bootstrap 文件（您可能会自定义，尤其是 variables.less）签入版本控制，并从 CDN 中包含 jQuery？这应该完全消除了对这两个前端组件进行特殊部署的需要。
为什么不从 Github 获取 jquery + bootstrap（也就是使用 git checkout）？
我只考虑签入，但将依赖项保留在 repo 中存在一些缺点，如果有更优雅的方法可以做到这一点，我宁愿避免。

标签： jquery twitter-bootstrap dependency-management

【解决方案1】：

大多数前端 JavaScript 库应通过引用包含在您的 HTML 中，因此无需下载/安装它。如果您打算修改 JavaScript 库，则必须自己托管修改后的代码。

因此，在您的情况下，您可以使用 Google Libraries API 来加载 jquery，如下所示：

<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>

大多数网站都将自定义的 Bootstrap 资产保存在自己的存储库中，并直接托管它们。引导程序定制在http://twitter.github.com/bootstrap/download.html 中进行了描述。引导加载代码应如下所示：

<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="/static/src/bootstrap_base.js"></script>
<!--    <script src="/static/bootstrap/js/jquery.js"></script>  -->
<!--    <script src="/static/bootstrap/js/bootstrap-transition.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-alert.js"></script> 
<script src="/static/bootstrap/js/bootstrap-modal.js"></script>
<script src="/static/bootstrap/js/bootstrap-dropdown.js"></script> 
<!--    <script src="/static/bootstrap/js/bootstrap-scrollspy.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-tab.js"></script> 
<!--    <script src="/static/bootstrap/js/bootstrap-tooltip.js"></script> -->
<!--    <script src="/static/bootstrap/js/bootstrap-popover.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-button.js"></script> 
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<!--    <script src="/static/bootstrap/js/bootstrap-carousel.js"></script> -->
<!--    <script src="/static/bootstrap/js/bootstrap-typeahead.js"></script> -->

如果您不想托管引导 javascript，您可以随时直接链接到最新版本：

<!-- This is NOT recommended -->
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap_base.js"></script>
<!--    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> -->
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script> 
etc..

【讨论】：