最近在做前端自动化构建,在使用wiredep向index.html注入bower插件的时候遇到了很多的坑,在此做一个记录:

1、引入的文件问题

wiredep只能注入bower.json文件中dependencies的插件

2、引入的文件依赖问题

例如:项目需要最先引入juqeryangularjs,在dependenciesjuqeryangularjs放到最前面即可。

1
2
3
4
5
"dependencies": {
"jquery": "^3.3.1",
"angularjs": "^4.17.5",
"somejs":"****"
},

3、有些插件无法自动引入的问题

例如:bootstrap的css样式无法自动引入到index中,在项目的bower中加入overrides字段,如下所示:

1
2
3
4
5
6
7
8
9
10
11
"dependencies": {
"jquery": "^3.3.1",
"angularjs": "^4.17.5",
"authorJs":"****"
},
"overrides": { /*自定义引入文件地址*/
"bootstrap": {
"main": ["dist/css/bootstrap.min.css", "dist/js/bootstrap.min.js"] //多个文件
//"main": "dist/css/bootstrap.min.css" //单个文件
}
}

其他插件相同引入即可。