wiredep自动注入的条件

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/04/30/wiredep-inject-resources/

Bower解决了前端依赖的获取问题，而Wiredep的初衷是为了解决前端依赖的自动引用问题。

比如来个简单的例子，以Bootstrap为例，在html中添加

<html>
<head>
  <!-- bower:css -->
  <!-- endbower -->
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>

那么在安装bootstrap以后我们会发现只有bootstrap.js被正常引用了，但是对应的css并没有。

这是因为wiredep的工作原理是检查依赖的bower.json文件，并根据其中的main和dependencies来判断需要注入的文件和对应的依赖。而Bootstrap的bower.json文件如下：

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": "1.9.1 - 2"
  }
}

在main中有两个文件，一个js文件，一个less文件，这就是为什么js被注入了，而css没有被注入的原因，当然作为依赖的jquery在bower安装时已经被安装了，这里也会被注入。

那么如果需要注入bootstrap.css怎么办？

手动引用dist目录下的css
利用自动注入将boostrap.less注入应用自己的less中一起编译

再来看一下jquery-ui库，在安装之后也是只有js文件，没有对应的css。

{
  "name": "jquery-ui",
  "version": "1.11.4",
  "main": [
    "jquery-ui.js"
  ],
  "ignore": [
  ],
  "dependencies": {
    "jquery": ">=1.6"
  }
}

可以看到在main中根本没有css，对应的css文件在theme目录中有很多可选主题样式，估计这也是为什么css没有被包含在main中的原因，这种情况手动引用比较简单。

当然在依赖库的bower.json文件有问题或者不符合你项目要求的时候还可以自定义bower.json。因为wiredep库是可以自定义bower.json文件的，将自定义的bower.json作为项目代码控制的一部分提交，这样既可以保证bower依赖的独立性，也避免了手动引用。

附上wiredep中自定义bower.json的对应代码

 config.set
    ('bower.json', opts.bowerJson || JSON.parse($.fs.readFileSync($.path.join(cwd, './bower.json'))))

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/04/30/wiredep-inject-resources/

《wiredep自动注入的条件》有2条评论

回复 jcnlcxc 取消回复