在现代的前端开发中，使用 npm 包管理器已经成为了必备技能。而在开发过程中，使用外部的 CSS 和 JavaScript 库也是常见的需求。如果我们手动引入这些库的话，可能会因为路径错误或者版本问题造成一些不必要的麻烦。这时候，可以使用一个很实用的工具——npm-wiredep。
什么是 npm-wiredep
npm-wiredep 是一个帮助自动插入 bower 外部库依赖的 npm 包。
npm-wiredep 会扫描你的某个文件，比如 HTML 文件，判断其中需要依赖的 JS、CSS 和其他前端库，并将其自动插入到 HTML 文件中。
npm-wiredep 使用起来非常方便，只要在配置中定义好需要插入的文件和目录路径，就可以自动插入了。
npm-wiredep 的项目安装
首先，你需要在项目中全局安装 npm-wiredep。在终端中执行以下命令：
npm install -g wiredep
接着，在你的 HTML 代码中添加注释来指明需要自动加载的外部库。一些常见的库也是支持的，比如 jQuery、Bootstrap 等。npm-wiredep 可以自动为你加载这些库。
<!-- bower:js --> <!-- endbower -->
<!-- bower:css --> <!-- endbower -->
npm-wiredep 的使用方法
接下来，我们来看一下如何使用 npm-wiredep。
首先，你需要打开你的命令行终端，在你的项目文件夹中输入以下命令：
wiredep
这时，npm-wiredep 会扫描你的 HTML 文件，并自动插入需要加载的库。在处理完成后，会在控制台中输出所插入的文件列表，如下所示：
app/index.html bower_components/jquery/dist/jquery.js bower_components/angular/angular.js bower_components/angular-ui-router/release/angular-ui-router.js bower_components/bootstrap/dist/css/bootstrap.css bower_components/bootstrap/dist/css/bootstrap.css.map bower_components/bootstrap/dist/js/bootstrap.js
这时，去查看你的 HTML 文件，你会发现所有需要加载的库都已经被自动引入到了 HTML 文件中了！
更高级的使用方法
npm-wiredep 还支持一些高级的使用方法，比如指定特定模块的路径、忽略某些模块和自定义引入路径等。下面是这些用法的示例：
wiredep --exclude bootstrap
这条命令指定 npm-wiredep 为忽略名为 bootstrap 的模块。
wiredep --overrides "jquery: {
main: [bower_components/jquery/dist/jquery.js],
ignorePaths: ['jquery.js']
}"这条命令指定 npm-wiredep 引入 bower_components/jquery/dist/jquery.js 作为 main，同时忽略文件名为 jquery.js 的路径。
结语
npm-wiredep 是一个可以大大减轻前端开发人员工作负担的工具，让你更加专注于重要的业务逻辑和细节。相信如果你仔细学习并掌握使用规范，npm-wiredep 会成为你前端开发的得力助手。
通过本篇文章，我们了解了 npm-wiredep 的安装及基本使用方法，以及一些高级用法。希望本文能够对你学习和掌握 npm-wiredep 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056de381e8991b448e720d