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

提示

使用此方法的目的是通过代理地址来解决请求解析加速的需求。这里使用了 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

通过修改 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

警告

修改 bower.json 中的所有依赖项 URL 为镜像地址，以确保国内的访问速度。

# 2.4 方法四：使用 jsDelivr 代理 GitHub

jsDelivr (opens new window) 是一个公共的 CDN 服务，支持通过代理 GitHub 存储库来加速包的下载。你可以将 bower.json 中的依赖项修改为 jsDelivr 提供的代理 URL，从而进一步提升下载速度。

例如，修改依赖项：

"bootstrap": "https://fastly.jsdelivr.net/gh/twbs/bootstrap@3.3.7/dist/css/bootstrap.min.css",
"angular": "https://fastly.jsdelivr.net/gh/angular/angular.js@1.8.3/angular.min.js",

1
2

通过这种方式，Bower 会通过 jsDelivr 来加速 GitHub 资源的下载。

# 2.5 方法五：手动下载并使用本地资源

如果访问速度仍然不理想，可以手动下载所需的依赖包，并将它们放置到 bower_components 目录下。然后，可以通过修改 .bowerrc 文件，将 bower.json 中的路径指向本地文件夹，从而绕过网络请求，直接使用本地资源。

例如：

{
  "directory": "bower_components"
}

1
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

# 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

# 3.2 缓存清理

# 3.3 缓存查看

#Gradle #Nexus #私服

← Gradle镜像加速虚拟环境思路→