GitHub：https://github.com/flitrue/npm-install-global

简介

当我们使用nvm管理node，切换node版本时，安装在全局的npm包无法共用之前node版本中的npm包，需要重新下载所有的全局模块，这很蛋疼。也许你可能这么做：

• 将全局安装好的所有模块（node_modules/下）复制到新版本node_modules/中
• 添加npm配置，设置共用的prefix（执行npm config set prefix "***"）

第一种可以满足要求，但是不是很优雅；
第二种是行不通的，nvm会提示与npm配置prefix不兼容。

1

nvm is not compatible with the npm config "prefix" option...

让执行nvm use --delete-prefix *** or npm config delete prefix才可以，这两句的意思是删掉你设置的npm配置。

Q：难道没有其他办法了吗？
A：是的，就连nvm官方都没有办法解决。

使用

将需要全局安装的模块名写到data.json中，切换node版本后执行以下命令，一键安装所有的模块

1

bash init.sh

安装一个新的全局模块时，例如安装pm2，可执行：

1

bash install.sh pm2 # 相当于执行 npm i -g pm2，并将pm2模块写入data.json文件中

作用域更加清晰

不存在变量作用域自动提升造成变量值被覆盖的问题，例如：

1
2
3
4
5
6
7
8

let a = 1;
var b = 1;
if (true) {
  let a = 2;
  var b = 2;
}
console.log(a) // a is 1
console.log(b) // b is 2

作用域更容易控制

let 的作用域是根据代码块（enclosing block）来判定的，而 var 的作用域是根据函数块（function block）来判定的。这样的话，如果我们的变量都使用 let/const 来声明，那么以前的立即执行函数就不需要了，我们只要加一个代码块就好了，例如：

1
2
3
4

{
  let a = 1;
}
console.log(a) //  a is not defined

Runtime自动检查重复声明的函数并报错

在同一个作用域内不允许重复声明变量，例如：

1
2
3
4
5

if (true) {
  let a = 1;
  let a = 2;
}
// Runtime会报错：Uncaught SyntaxError: Identifier 'a' has already been declared

有了更加清晰的作用域，我们的代码就能够更好被预测，也更好维护。
有了更容易控制的作用域可以让我们减少很多立即执行的函数。
Runtime的自动检查可以避免不必要，甚至是错误的代码声明。

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

::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
  height: 50px;
  outline-offset: 0;
  outline: 1px solid rgba(255,255,255,0.2);
  -webkit-border-radius: 8px;
  border: 1px solid  rgba(255,255,255,0);
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  height: 50px;
  -webkit-border-radius: 8px;
}
/*---滚动条大小--*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  -webkit-border-radius: 8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece {
  background-color: rgba(255,255,255,0.1);
  -webkit-border-radius: 8px;
}
/*---x轴滚动条和y轴滚动条交汇的地方---*/
::-webkit-scrollbar-corner {
  background-color: transparent;
}

其中 ::-webkit-scrollbar 中width 和 height 两个属性

width 定义y轴方向滚动条，thumb的宽度

height 定义x轴方向滚动条，thumb的高度

::-webkit-resizer x轴滚动条和y轴滚动条交汇的地方,用来调整大小