Bower镜像加速
# 01-国内bower install 慢的问题处理
# 1、问题剖析
主要是因为国内访问 GitHub 存在一些访问慢的场景，导致执行
bower install --allowed-root时出现下载不下来或验证失败的问题。
在国内访问 GitHub 时，由于网络原因，经常会遇到速度较慢、连接不稳定等问题。尤其在使用 bower 安装包时，由于某些依赖包托管在
GitHub 上，可能会导致下载速度慢，甚至请求超时或验证失败。
# 2、解决办法
# 2.1 方法一：使用 GitHub520
GitHub520: 本项目无需安装任何程序，通过修改本地 hosts 文件，试图解决 GitHub 访问速度慢的问题 (opens new window)
提示
这种方法通过修改 hosts 文件来加速 GitHub 的访问，解决国内访问 GitHub 慢的问题。
这种方法是通过修改本地的 hosts 文件，将 GitHub
的域名指向国内的加速节点，从而提高访问速度。详细的修改步骤和配置可以参考 GitHub520 项目 (opens new window)
中的说明。
# 2.2 方法二：修改项目的 bower.json
{
"registry": "https://registry.bower.io/",
"strict-ssl": false,
"analytics": false,
"shorthand-resolver": "https://ghfast.top/https://github.com/{{owner}}/{{package}}.git",
"directory": "app/bower_components"
}
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
使用此方法的目的是通过代理地址来解决请求解析加速的需求。这里使用了 ghproxy 镜像站点来加速 GitHub 的资源请求。
在 bower.json 文件中配置了 shorthand-resolver，它允许我们通过代理的 GitHub 镜像站点来加速包的下载。这样可以有效解决由于
GitHub 访问速度慢而导致的安装失败问题。
扩展补充：
- Bower 1.3.9 版本：支持使用 GitHub 的简写方式来安装特定标签或提交的包。例如，可以使用
someone/some-package这种格式来指定 GitHub 仓库。- Bower 1.8.0 版本：改进了 GitHub 简写解析器，优化了简写方式的使用。默认的 GitHub 简写解析器从
git://改为https://，进一步提升了简写方式的使用体验。
# 2.3 方法三：修改 bower.json 的展现方式
原始 bower.json 文件如下：
{
"name": "adminconsole",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"angular": "*",
"angular-route": "*",
"angular-bootstrap": "0.11.0",
"underscore": "1.7.0",
"restangular": "1.4.0",
"angular-bootstrap-toggle-switch": "0.5.1",
"angular-animate": "*",
"angular-translate": "*",
"font-awesome": "4.2.0"
},
"devDependencies": {
"angular-mocks": "*",
"commonjs": "0.2.0",
"chai": "1.8.0",
"mocha": "1.14.0",
"sinon": "1.10.3"
},
"resolutions": {
"angular": "1.8.x"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
通过修改 bower.json 文件，使用 ghproxy 镜像站点来加速依赖包的下载，改写后的文件如下：
{
"name": "adminconsole",
"private": true,
"dependencies": {
"bootstrap": "https://ghfast.top/https://github.com/twbs/bootstrap.git#3.3.7",
"angular": "https://ghfast.top/https://github.com/angular/angular.js.git#*",
"angular-route": "https://ghfast.top/https://github.com/angular/bower-angular-route.git#*",
"angular-bootstrap": "https://ghfast.top/https://github.com/angular-ui/bootstrap-bower.git#0.11.0",
"underscore": "https://ghfast.top/https://github.com/jashkenas/underscore.git#1.7.0",
"restangular": "https://ghfast.top/https://github.com/mgonto/restangular.git#1.4.0",
"angular-bootstrap-toggle-switch": "https://ghfast.top/https://github.com/yuraantonov11/angular-bootstrap-toggle-switch.git#0.5.1",
"angular-animate": "https://ghfast.top/https://github.com/angular/bower-angular-animate.git#*",
"angular-translate": "https://ghfast.top/https://github.com/angular-translate/bower-angular-translate.git#*",
"font-awesome": "https://ghfast.top/https://github.com/FortAwesome/Font-Awesome.git#4.2.0"
},
"devDependencies": {
"angular-mocks": "https://ghfast.top/https://github.com/angular/bower-angular-mocks.git#*",
"commonjs": "https://ghfast.top/https://github.com/commonjs/commonjs.git#0.2.0",
"chai": "https://ghfast.top/https://github.com/chaijs/chai.git#1.8.0",
"mocha": "https://ghfast.top/https://github.com/mochajs/mocha.git#1.14.0",
"sinon": "https://ghfast.top/https://github.com/sinonjs/sinon.git#1.10.3"
},
"resolutions": {
"angular": "1.8.x"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
警告
修改 bower.json 中的所有依赖项 URL 为镜像地址，以确保国内的访问速度。
# 2.4 方法四：使用 jsDelivr 代理 GitHub
jsDelivr (opens new window) 是一个公共的 CDN 服务，支持通过代理 GitHub
存储库来加速包的下载。你可以将 bower.json 中的依赖项修改为 jsDelivr 提供的代理 URL，从而进一步提升下载速度。
例如，修改依赖项：
"bootstrap": "https://fastly.jsdelivr.net/gh/twbs/[email protected]/dist/css/bootstrap.min.css",
"angular": "https://fastly.jsdelivr.net/gh/angular/[email protected]/angular.min.js",
1
2
2
通过这种方式，Bower 会通过 jsDelivr 来加速 GitHub 资源的下载。
# 2.5 方法五：手动下载并使用本地资源
如果访问速度仍然不理想，可以手动下载所需的依赖包，并将它们放置到 bower_components 目录下。然后，可以通过修改 .bowerrc
文件，将 bower.json 中的路径指向本地文件夹，从而绕过网络请求，直接使用本地资源。
例如：
{
"directory": "bower_components"
}
1
2
3
2
3
这种方式可以实现“秒下”，特别适合那些已经下载好依赖项的场景。
# 2.6 原图
# 3、尝试
# 使用项目 node 执行 install
/opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node/node /opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node_modules/bower/bin/bower install --allow-root --verbose
# 使用项目 node 执行 bower cache 清理
/opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node/node /opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node_modules/bower/bin/bower cache clean --allow-root --verbose
# 使用项目 node 获取 cache list 集合
/opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node/node /opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node_modules/bower/bin/bower cache list --allow-root
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 3.1 安装执行结果
[root@centos1 admin-web]# /opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node/node /opt/modules/ambari/ambari-admin/src/main/resources/ui/admin-web/node_modules/bower/bin/bower install --all
ow-root --verbose
bower angular-route#* cached https://github.com/angular/bower-angular-route.git#1.8.3
bower angular-route#* validate 1.8.3 against https://github.com/angular/bower-angular-route.git#*
bower angular#* cached https://github.com/angular/bower-angular.git#1.8.3
bower angular#* validate 1.8.3 against https://github.com/angular/bower-angular.git#*
bower angular-bootstrap#0.11.0 cached https://github.com/angular-ui/bootstrap-bower.git#0.11.0
bower angular-bootstrap#0.11.0 validate 0.11.0 against https://github.com/angular-ui/bootstrap-bower.git#0.11.0
bower restangular#1.4.0 cached https://github.com/mgonto/restangular.git#1.4.0
bower restangular#1.4.0 validate 1.4.0 against https://github.com/mgonto/restangular.git#1.4.0
bower underscore#1.7.0 cached https://github.com/jashkenas/underscore.git#1.7.0
bower underscore#1.7.0 validate 1.7.0 against https://github.com/jashkenas/underscore.git#1.7.0
bower angular-bootstrap-toggle-switch#0.5.1 cached https://github.com/JumpLink/angular-toggle-switch.git#0.5.1
bower angular-bootstrap-toggle-switch#0.5.1 validate 0.5.1 against https://github.com/JumpLink/angular-toggle-switch.git#0.5.1
bower font-awesome#4.2.0 cached https://github.com/FortAwesome/Font-Awesome.git#4.2.0
bower font-awesome#4.2.0 validate 4.2.0 against https://github.com/FortAwesome/Font-Awesome.git#4.2.0
bower angular-translate#* cached https://github.com/PascalPrecht/bower-angular-translate.git#2.19.1
bower angular-translate#* validate 2.19.1 against https://github.com/PascalPrecht/bower-angular-translate.git#*
bower angular-animate#* cached https://github.com/angular/bower-angular-animate.git#1.8.3
bower angular-animate#* validate 1.8.3 against https://github.com/angular/bower-angular-animate.git#*
bower angular-mocks#* cached https://github.com/angular/bower-angular-mocks.git#1.8.3
bower angular-mocks#* validate 1.8.3 against https://github.com/angular/bower-angular-mocks.git#*
bower sinon#1.10.3 cached https://github.com/cjohansen/Sinon.JS.git#1.10.3
bower sinon#1.10.3 validate 1.10.3 against https://github.com/cjohansen/Sinon.JS.git#1.10.3
bower chai#1.8.0 cached https://github.com/chaijs/chai.git#1.8.0
bower chai#1.8.0 validate 1.8.0 against https://github.com/chaijs/chai.git#1.8.0
bower commonjs#0.2.0 cached https://github.com/chrisabrams/commonjs.git#0.2.0
bower commonjs#0.2.0 validate 0.2.0 against https://github.com/chrisabrams/commonjs.git#0.2.0
bower bootstrap#3.3.7 cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7 validate 3.3.7 against https://github.com/twbs/bootstrap.git#3.3.7
bower mocha#1.14.0 cached https://github.com/mochajs/mocha.git#1.14.0
bower mocha#1.14.0 validate 1.14.0 against https://github.com/mochajs/mocha.git#1.14.0
bower angular#>=1 cached https://github.com/angular/bower-angular.git#1.8.3
bower angular#>=1 validate 1.8.3 against https://github.com/angular/bower-angular.git#>=1
bower lodash#>=1.3.0 <2.5.0 cached https://github.com/lodash/lodash.git#2.4.2
bower lodash#>=1.3.0 <2.5.0 validate 2.4.2 against https://github.com/lodash/lodash.git#>=1.3.0 <2.5.0
bower jquery#1.9.1 - 3 not-cached https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower jquery#1.9.1 - 3 resolve https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower jquery#1.9.1 - 3 download https://github.com/jquery/jquery-dist/archive/3.7.1.tar.gz
bower jquery#1.9.1 - 3 extract archive.tar.gz
bower jquery#1.9.1 - 3 resolved https://github.com/jquery/jquery-dist.git#3.7.1
bower angular extra-resolution Unnecessary resolution: angular#1.8.x
bower angular-bootstrap#0.11.0 install angular-bootstrap#0.11.0
bower restangular#1.4.0 install restangular#1.4.0
bower underscore#1.7.0 install underscore#1.7.0
bower angular-route#* install angular-route#1.8.3
bower angular#1.8.3 install angular#1.8.3
bower angular-translate#* install angular-translate#2.19.1
bower font-awesome#4.2.0 install font-awesome#4.2.0
bower chai#1.8.0 install chai#1.8.0
bower angular-mocks#* install angular-mocks#1.8.3
bower sinon#1.10.3 install sinon#1.10.3
bower commonjs#0.2.0 install commonjs#0.2.0
bower mocha#1.14.0 install mocha#1.14.0
bower lodash#>=1.3.0 <2.5.0 install lodash#2.4.2
bower angular-bootstrap-toggle-switch#0.5.1 install angular-bootstrap-toggle-switch#0.5.1
bower angular-animate#* install angular-animate#1.8.3
bower bootstrap#3.3.7 install bootstrap#3.3.7
bower jquery#1.9.1 - 3 install jquery#3.7.1
angular-bootstrap#0.11.0 app/bower_components/angular-bootstrap
└── angular#1.8.3
restangular#1.4.0 app/bower_components/restangular
├── angular#1.8.3
└── lodash#2.4.2
underscore#1.7.0 app/bower_components/underscore
angular-route#1.8.3 app/bower_components/angular-route
└── angular#1.8.3
angular#1.8.3 app/bower_components/angular
angular-translate#2.19.1 app/bower_components/angular-translate
└── angular#1.8.3
font-awesome#4.2.0 app/bower_components/font-awesome
chai#1.8.0 app/bower_components/chai
angular-mocks#1.8.3 app/bower_components/angular-mocks
└── angular#1.8.3
sinon#1.10.3 app/bower_components/sinon
commonjs#0.2.0 app/bower_components/commonjs
mocha#1.14.0 app/bower_components/mocha
lodash#2.4.2 app/bower_components/lodash
angular-bootstrap-toggle-switch#0.5.1 app/bower_components/angular-bootstrap-toggle-switch
angular-animate#1.8.3 app/bower_components/angular-animate
└── angular#1.8.3
bootstrap#3.3.7 app/bower_components/bootstrap
└── jquery#3.7.1
jquery#3.7.1 app/bower_components/jquery
[root@centos1 admin-web]#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
# 3.2 缓存清理
# 3.3 缓存查看
