win10下使用nodejs安装及webstorm创建express项目的指导


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\npmnpm安装的全局依赖。

注意

虽然nodejswindows安装程序提供了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.

win10下使用nodejs安装及webstorm创建express项目的指导

  • 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

win10下使用nodejs安装及webstorm创建express项目的指导

注意

如果你第一次使用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

win10下使用nodejs安装及webstorm创建express项目的指导

  • 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)

win10下使用nodejs安装及webstorm创建express项目的指导

  • 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.

win10下使用nodejs安装及webstorm创建express项目的指导

  • nvm root : 该命令可以用来设置和查看当前的nodejs的实际存放的位置。这里需要特别说明一下,因为nvm是用来管理多个nodejs的环境的,为了保证一致,nvm在我们使用nvm use来指定nodejs版本号时,就会在C:\Program Files下创建一个软连接来指定当前nodejs的实际版本的路径。而nvm root就是用来设定nodejs实际版本下载的存放路径。

win10下使用nodejs安装及webstorm创建express项目的指导

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/

win10下使用nodejs安装及webstorm创建express项目的指导

我在自己电脑上使用的是默认的配置,可以看到我的nodejs实际的存放路径是:

$ nvm root
Current Root: C:\Users\Administrator\AppData\Roaming\nvm

win10下使用nodejs安装及webstorm创建express项目的指导

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镜像安装速度还是很可以的(一分钟不到就安装成功了)。

win10下使用nodejs安装及webstorm创建express项目的指导

  • 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

win10下使用nodejs安装及webstorm创建express项目的指导

如果想切换回官方的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

win10下使用nodejs安装及webstorm创建express项目的指导

使用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/

win10下使用nodejs安装及webstorm创建express项目的指导

下面创建步骤直接上图和对图进行说明,相似读者能够看明白。

在进行创建项目时,我们需要安装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

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

从上图可以看出webstorm识别出了C:\Program Files\nodejs作为nodejs的路径,但是它给出一个提示Unspecified express-generator package version,这显然是不合理的。

而造成这种现象的原因就是C:\Program Files\nodejs是指一个软连接,因此C:\Program Files\nodejs下的npmpackage是不能被web-storm正确的识别出来的。因此,我们需要手动配置一下nodejs的实际路径。

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

选择~/AppData/Roaming/nvm/v6.10.3/node.exe作为nodejs拦截器之后,webstorm已经正确的识别出来我们当前安装的express-generator了。我们选择自己喜欢的html模板和CSS预编译方式之后,输入正确的工程名,就可以创建express项目了。

win10下使用nodejs安装及webstorm创建express项目的指导

创建好的工程截图如下:

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

win10下使用nodejs安装及webstorm创建express项目的指导

总结

本文介绍了windows系统下安装nvm nodejs版本管理包。并且配置了阿里巴巴的nodejs的镜像和npm镜像。并且,结合webstorm创建出了nodejs express项目,成功安装依赖并运行起来。

上一篇:leetcode https://oj.leetcode.com/problems/jump-game-ii/


下一篇:C:\Program Files (x86)\Common Files\microsoft shared\DevServer\10.0