wiredep自动注入的条件

30 4月

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

转载自夜明的孤行灯

本文链接地址: 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怎么办?

  1. 手动引用dist目录下的css
  2. 利用自动注入将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/

2 Replies to “wiredep自动注入的条件

  1. 你好
    请问你用的是哪一家的服务器?
    国外哪家服务器比较好用?
    我现在在用阿里云,但是备案很麻烦

发表评论

邮箱地址不会被公开。