title: win10下使用nodejs安装
win10下使用nodejs安装及webstorm创建express项目的指导
windows下nvm的安装
熟悉linux下nodejs
开发的朋友应该都知道nvm是一款node版本管理的工具,使用nvm我们可以安装任意多的nodejs版本,以及决定自己的何时使用某个版本。
但是nvm
官方在github
上托管的nvm
仓库上明确的说明了nvm
不支持windows
系统,但是其给出了两个不是由他们参与开发的第三方的解决方案。这两个方案如下:
我自己使用的是nvm-windows
,安装的过程很简单,首先是需要卸载自己已经安装过的nodejs
和删除C:\Users<user>\AppData\Roaming\npm
下npm
安装的全局依赖。
注意
虽然nodejs
的windows
安装程序提供了nodejs
卸载的功能,但是通过其卸载程序卸载了nodejs
之后,其安装文件夹下还会存在部分文件,因此在卸载之后,最好手动删除其安装目录。
nvm
的安装比较简单,因此,在这里就不再放图了,有问题的话,可以参考nvm-windows
的官网。
使用NVM安装nodejs
因为nvm
只是一个nodejs
的环境管理包,因此,我们在成功的安装了nvm
之后,我们要手动安装我们需要的nodejs版本。
根据nvm-windows
提供的常用的命令如下:
- nvm arch [32|64]:该命令用来查看当前的
nodejs
是运行在32位/64位
的windows
系统之上。也可以指定相应的位数来覆盖默认的设置。
# 查看当前的nodejs架构
$ nvm arch
System Default: 64-bit.
Currently Configured: 64-bit.
- nvm install
[arch]: 该命令用来安装指定版本和指定系统架构( 32/64
)的nodejs环境。安装速度还是比较快的。在写本文前,我已经安装了nodejs 6.10.3 64
的版本了,为了演示本命令的使用,我安装了32位的6.10.2版本的nodejs环境并成功的安装。
$ nvm install 6.10.2 32
Downloading node.js version 6.10.2 (32-bit)...
Complete
Creating C:\Users\Administrator\AppData\Roaming\nvm\temp
Downloading npm version 3.10.10... Complete
Installing npm v3.10.10...
Installation complete. If you want to use this version, type
nvm use 6.10.2
注意
如果你第一次使用nvm install 版本号
来安装nodejs
,需要使用下面的nvm use
来选择你的nodejs
环境,use
后才能使用npm等操作。
- nvm list [available]:查看当前系统中安装了哪些版本的
nodejs
。
$ nvm list
* 6.10.3 (Currently using 64-bit executable)
6.10.2
- nvm use
[arch]:该命令用来切换 nodejs
的版本。就像Anaconda
可以配置多个python
环境一样。
Administrator@neil-PC MINGW64 ~/WebstormProjects
$ nvm use 6.10.2 32
Now using node v6.10.2 (32-bit)
$ nvm use 6.10.3
Now using node v6.10.3 (64-bit)
- nvm uninstall
: 这个命令是用来卸载指定版本的nodejs环境的。
$ nvm uninstall 6.10.2
Uninstalling node v6.10.2...Error removing node v6.10.2
Manually remove C:\Users\Administrator\AppData\Roaming\nvm\v6.10.2.
- nvm root
: 该命令可以用来设置和查看当前的nodejs的实际存放的位置。这里需要特别说明一下,因为 nvm
是用来管理多个nodejs
的环境的,为了保证一致,nvm
在我们使用nvm use
来指定nodejs
版本号时,就会在C:\Program Files
下创建一个软连接来指定当前nodejs
的实际版本的路径。而nvm root
就是用来设定nodejs
实际版本下载的存放路径。
Administrator@neil-PC MINGW64 /c/Program Files
$ ls -n | grep nodejs
lrwxrwxrwx 1 197108 197121 50 5月 21 17:27 nodejs -> /c/Users/Administrator/AppData/Roaming/nvm/v6.10.3/
我在自己电脑上使用的是默认的配置,可以看到我的nodejs
实际的存放路径是:
$ nvm root
Current Root: C:\Users\Administrator\AppData\Roaming\nvm
- nvm node_mirror <node_mirror_url>: 用来设置
nodejs
的下载源。国内的用户可以使用淘宝的nodejs
镜像。
https://npm.taobao.org/mirrors/node/
Administrator@neil-PC MINGW64 ~/WebstormProjects
$ date #为了计算使用淘宝的镜像时安装nodejs需要的大概的时间
2017年05月21日 17:46:43
$ nvm install 6.10.1
Downloading node.js version 6.10.1 (64-bit)...
Complete
Creating C:\Users\Administrator\AppData\Roaming\nvm\temp
Downloading npm version 3.10.10... Complete
Installing npm v3.10.10...
Installation complete. If you want to use this version, type
nvm use 6.10.1
$ date #为了计算使用淘宝的镜像时安装nodejs需要的大概的时间
2017年05月21日 17:47:43
可以看到使用淘宝的nodejs镜像
安装速度还是很可以的(一分钟不到就安装成功了)。
- nvm npm_mirror <npm_mirror_url>: 设置npm的镜像地址。我想大家都知道
cnpm
是使用淘宝提供的国内的npm
镜像的命令。具体的使用方法可以参考淘宝npm镜像
官网。这里的nvm_windows
可以使用nvm npm_mirror
来直接修改npm的镜像地址。(不过这种方法最好不要用,还是使用cnpm的方式比较好,国内的镜像同步的速度还是有一点偏差的,如果喜欢折腾,那么可以在npm的官方镜像地址和淘宝的镜像地址之间进行切换。)
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/ #设置npm的镜像地址为淘宝的npm镜像地址
$ npm install -g jslint
C:\Program Files\nodejs\jslint -> C:\Program Files\nodejs\node_modules\jslint\bin\jslint.js
C:\Program Files\nodejs
`-- jslint@0.10.3
+-- exit@0.1.2
+-- glob@7.1.2
| +-- fs.realpath@1.0.0
| +-- inflight@1.0.6
| | `-- wrappy@1.0.2
| +-- inherits@2.0.3
| +-- minimatch@3.0.4
| | `-- brace-expansion@1.1.7
| | +-- balanced-match@0.4.2
| | `-- concat-map@0.0.1
| +-- once@1.4.0
| `-- path-is-absolute@1.0.1
+-- nopt@3.0.6
| `-- abbrev@1.1.0
`-- readable-stream@2.1.5
+-- buffer-shims@1.0.0
+-- core-util-is@1.0.2
+-- isarray@1.0.0
+-- process-nextick-args@1.0.7
+-- string_decoder@0.10.31
`-- util-deprecate@1.0.2
如果想切换回官方的npm
镜像地址,可以使用nvm npm_mirror http://r.cnpmjs.org/
切换回来。
Administrator@neil-PC MINGW64 ~/WebstormProjects
$ nvm npm_mirror http://r.cnpmjs.org/
Administrator@neil-PC MINGW64 ~/WebstormProjects
$ npm install -g create-react-app
C:\Program Files\nodejs\create-react-app -> C:\Program Files\nodejs\node_modules\create-react-app\index.js
C:\Program Files\nodejs
`-- create-react-app@1.3.1
+-- chalk@1.1.3
| +-- ansi-styles@2.2.1
| +-- escape-string-regexp@1.0.5
| +-- has-ansi@2.0.0
| | `-- ansi-regex@2.1.1
| +-- strip-ansi@3.0.1
| `-- supports-color@2.0.0
+-- commander@2.9.0
| `-- graceful-readlink@1.0.1
+-- cross-spawn@4.0.2
| +-- lru-cache@4.0.2
| | +-- pseudomap@1.0.2
| | `-- yallist@2.1.2
| `-- which@1.2.14
| `-- isexe@2.0.0
+-- fs-extra@1.0.0
| +-- graceful-fs@4.1.11
| +-- jsonfile@2.4.0
| `-- klaw@1.3.1
+-- hyperquest@2.1.2
| +-- buffer-from@0.1.1
| | `-- is-array-buffer-x@1.2.1
| | +-- has-to-string-tag-x@1.2.0
| | | `-- has-symbol-support-x@1.2.0
| | +-- is-object-like-x@1.2.0
| | | +-- is-function-x@1.2.0
| | | `-- is-primitive@2.0.0
| | `-- to-string-tag-x@1.2.0
| | +-- lodash.isnull@3.0.0
| | `-- validate.io-undefined@1.0.3
| +-- duplexer2@0.0.2
| | `-- readable-stream@1.1.14
| | +-- isarray@0.0.1
| | `-- string_decoder@0.10.31
| `-- through2@0.6.5
| +-- readable-stream@1.0.34
| `-- xtend@4.0.1
+-- semver@5.3.0
+-- tar-pack@3.4.0
| +-- debug@2.6.8
| | `-- ms@2.0.0
| +-- fstream@1.0.11
| | +-- inherits@2.0.3
| | `-- mkdirp@0.5.1
| | `-- minimist@0.0.8
| +-- fstream-ignore@1.0.5
| | `-- minimatch@3.0.4
| | `-- brace-expansion@1.1.7
| | +-- balanced-match@0.4.2
| | `-- concat-map@0.0.1
| +-- once@1.4.0
| | `-- wrappy@1.0.2
| +-- readable-stream@2.2.9
| | +-- buffer-shims@1.0.0
| | +-- core-util-is@1.0.2
| | +-- isarray@1.0.0
| | +-- process-nextick-args@1.0.7
| | +-- string_decoder@1.0.1
| | | `-- safe-buffer@5.0.1
| | `-- util-deprecate@1.0.2
| +-- rimraf@2.6.1
| | `-- glob@7.1.2
| | +-- fs.realpath@1.0.0
| | +-- inflight@1.0.6
| | `-- path-is-absolute@1.0.1
| +-- tar@2.2.1
| | `-- block-stream@0.0.9
| `-- uid-number@0.0.6
+-- tmp@0.0.31
| `-- os-tmpdir@1.0.2
`-- validate-npm-package-name@3.0.0
`-- builtins@1.0.3
使用webstorm
来创建express
应用
前面一章说过,nvm
安装nodejs
的方式是在nvm root
指定的地址中存放实际的nodejs
应用程序,只是在C:\Program Files
下创建了一个软连接而已。而webstorm
比较坑的就是,不会认出那是一个软连接,因此,我们需要用命令nvm root
或者C:\Program Files\nodejs
的属性来查看当前的nodejs
的实际地址。
我当前的nodejs
的实际地址是~/AppData/Roaming/nvm/v6.10.3/
。
下面创建步骤直接上图和对图进行说明,相似读者能够看明白。
在进行创建项目时,我们需要安装express-generator
(我的电脑上已经安装过了)
$ npm install express-generator -g
C:\Program Files\nodejs\express -> C:\Program Files\nodejs\node_modules\express-generator\bin\express-cli.js
C:\Program Files\nodejs
`-- express-generator@4.15.0
从上图可以看出webstorm
识别出了C:\Program Files\nodejs
作为nodejs
的路径,但是它给出一个提示Unspecified express-generator package version
,这显然是不合理的。
而造成这种现象的原因就是C:\Program Files\nodejs
是指一个软连接,因此C:\Program Files\nodejs
下的npm
的package
是不能被web-storm
正确的识别出来的。因此,我们需要手动配置一下nodejs
的实际路径。
选择~/AppData/Roaming/nvm/v6.10.3/node.exe
作为nodejs
拦截器之后,webstorm已经正确的识别出来我们当前安装的express-generator
了。我们选择自己喜欢的html模板和CSS预编译方式之后,输入正确的工程名,就可以创建express项目了。
创建好的工程截图如下:
总结
本文介绍了windows系统下安装nvm nodejs
版本管理包。并且配置了阿里巴巴的nodejs
的镜像和npm
镜像。并且,结合webstorm创建出了nodejs express
项目,成功安装依赖并运行起来。