#npm 包 bower-autoload 使用教程
##介绍
随着前端技术的发展，我们通常需要依赖大量的第三方库来完成项目开发。bower-autoload 是一个 npm 包，它能够在项目中自动加载 Bower 库，让前端开发更加方便快捷，而不必手动将每个库引入到对应的页面。
本文将为大家详细介绍 bower-autoload 的使用方法，并给出完整的示例代码。
##安装
你可以使用 npm 全局安装 bower-autoload：
$ npm install -g bower-autoload
##使用
- 初始化 bower.json 文件： 在项目的根目录中执行以下命令：
$ bower init
- 安装需要的 Bower 库： 你可以选择在 bower.json 文件中手动添加需要的库，或者通过以下命令来安装它们:
$ bower install <package> --save
- 安装 bower-autoload: 在项目根目录中执行以下命令：
$ npm install --save bower-autoload
- 在项目中引入 bower-autoload: 下一步是引入 bower-autoload。在项目的主 js 文件中添加以下代码：
require('bower-autoload')({
directory: './bower_components'
});该代码会匹配你所列出的 Bower 包，自动加载每个库的相应文件。默认情况下，bower-autoload 从 ./bower_components 中加载库。但是，如果你在 bower.json 中指定了其他目录，你需要将 directory 参数对应地设置为你所指定的目录。
- 在 HTML 文件中引入 JavaScript 库：最后，你需要在你的 HTML 文件中引入所需的 JavaScript 库。你可以在 /bower_components 中找到相应的文件，例如，要引入 jQuery，你需要添加以下代码：
<script src="/bower_components/jquery/dist/jquery.js"></script>
##示例代码
以下是一个基本的项目结构，它使用 bower-autoload 自动加载了两个库：jQuery 和 Bootstrap。
-- -------------------- ---- -------
------------
-------------------
---------
-------
------------
------------
-------
------
-----
------
------
-----------
-----
----------
-------------
-------------
---------------
-----------------
--------------- 以下是项目的 index.html 文件中的一部分，展示了 https://twbs.github.io/bootstrap/getting-started/#template 的模板的改变。
-- -------------------- ---- ------- ---- ---- ------ ------- ---- ----- -------- --- ------- ------------------------------------------------------- ---- ---- ----------- ---- ----- --- -- ---- ----- -------- --- ---- -------------- ---- ------------- ---- --- ----- ---- ----- --------- --- ----- --------------------------------------------------------- ----------------- ------- ---------------------------------------------------------------- ---- ---- ------ --- --- -- ----- --- ----- ------------------------ ----------------- ------- ------------------------------- -------
##结论
bower-autoload 自动地加载 Bower 库，让前端开发变得更加便捷。通过本文，你现在可以使用 bower-autoload 来构建更有效的项目。
通过 bower-autoload，我们可以快速的引入常用第三方前端库。实现前端快速开发，提升开发效率和代码质量。
##参考
https://www.npmjs.com/package/bower-autoload
https://bower.io/#installing-bower
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e97