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.

enter description here

  • 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

enter description here

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

enter description here

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

enter description here

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

enter description here

  • nvm root : 該命令可以用來設置和查看當前的nodejs的實際存放的位置。這里需要特別說明一下,因為 nvm是用來管理多個 nodejs的環境的,為了保證一致, nvm在我們使用 nvm use來指定 nodejs版本號時,就會在 C:\Program Files下創建一個軟連接來指定當前 nodejs的實際版本的路徑。而 nvm root就是用來設定 nodejs實際版本下載的存放路徑。

enter description here

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/

enter description here
我在自己電腦上使用的是默認的配置,可以看到我的nodejs實際的存放路徑是:

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

enter description here

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鏡像安裝速度還是很可以的(一分鍾不到就安裝成功了)。

enter description here

  • 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

enter description here

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

enter description here

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

enter description here

下面創建步驟直接上圖和對圖進行說明,相似讀者能夠看明白。

在進行創建項目時,我們需要安裝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

enter description here

enter description here

從上圖可以看出webstorm識別出了C:\Program Files\nodejs作為nodejs的路徑,但是它給出一個提示Unspecified express-generator package version,這顯然是不合理的。

而造成這種現象的原因就是C:\Program Files\nodejs是指一個軟連接,因此C:\Program Files\nodejs下的npmpackage是不能被web-storm正確的識別出來的。因此,我們需要手動配置一下nodejs的實際路徑。

enter description here

enter description here

enter description here

enter description here

選擇~/AppData/Roaming/nvm/v6.10.3/node.exe作為nodejs攔截器之后,webstorm已經正確的識別出來我們當前安裝的express-generator了。我們選擇自己喜歡的html模板和CSS預編譯方式之后,輸入正確的工程名,就可以創建express項目了。

enter description here

創建好的工程截圖如下:
enter description here

enter description here

enter description here

總結

本文介紹了windows系統下安裝nvm nodejs版本管理包。並且配置了阿里巴巴的nodejs的鏡像和npm鏡像。並且,結合webstorm創建出了nodejs express項目,成功安裝依賴並運行起來。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM