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
項目,成功安裝依賴並運行起來。