本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载自夜明的孤行灯
本文链接地址: 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/
你好
请问你用的是哪一家的服务器?
国外哪家服务器比较好用?
我现在在用阿里云,但是备案很麻烦
我就是用的阿里云,备案就半个月,弄好了就很好了。