nodeJS學習(3)--- npm 配置和安裝 express4.X 遇到的問題及解決


  前言:懶得看前面兩篇介紹的也可以從本節直接參考,但建議最好了解下,因為 4.X 的express 已經把命令行工具分離出來 (鏈接https://github.com/expressjs/generator

環境:win7

1. 首先 下載安裝 nodeJS , nodejs安裝可能比較簡單一點應該不會遇到什么問題,但鄙人不得不介紹一下npm(Node Package Manager), 它就是Nodejs的包管理器.Nodejs自身提供了基本的模塊,但是在這些基本模塊上開發實際應用需要較多的工作,能夠快速安裝和卸載package,新版nodejs已經集成了npm。下載安裝地址:https://nodejs.org/en/download/

   本人下載版本如下圖:紅圈文件

     

  安裝:一路 Next 即可,可以更改安裝路徑,其余不變(即: 默認下載了 npm)。具體見篇一:Node.js 安裝配置介紹

  安裝完成后不要立馬使用 nodeJS 或 npm命令。

 

2. 使用命令行改變 npm 啟動 和 緩存 位置(可以不更改,若不更改則會占用 C盤 空間):

 npm一般都會配置成全局模塊,這樣以防以后使用不方便,一般情況下我們會在NodeJs安裝目錄下下建立"node_global"及"node_cache"兩個文件夾,如下圖:

   

 接着:使用命令行改變npm啟動和緩存位置(此命令以管理員方式或用戶方式都可): 

1 npm config set prefix "F:\Program Files\nodejs\node_global"    # 啟動文件位置: 使用 npm 命令安裝的 全局模塊 文件存儲位置
2 npm config set cache "F:\Program Files\nodejs\node_cache"   # 緩存位置:緩存文件位置

再接着:更改 npm 啟動(即 全局模塊)的環境變量,步驟如下:

1 更改位置: 計算機->屬性->高級系統設置->環境變量->Path
2 
3 原來的(nodeJS,npm):
4     C:\Users\UserName\AppData\Roaming\npm  # (即 默認的 全局模塊 文件存儲位置,根據以上 npm啟動存儲位置的更改,該部分要變更) 
5     G:\Program Files\nodejs  #(即:nodeJS 安裝路徑,該路徑不變)
6 
7 改為:
8     G:\Program Files\node_global   # 改為:自定義的 全局模塊 存儲地址
9     G:\Program Files\nodejs  # 不用變更,安裝時自動已識別

 

3. 安使用 npm 命令安裝模塊,鑒於上篇提到的建立項目時已遇到的問題:

查了許多文檔:

  主要原因:The issue is caused by recent changes in express-generator structure: express.js has been renamed to express-cli.js

     導致結果:無法使用某些 IDE(eg: webstorm,...) 來創建 nodeJS 項目(如本人)

  查閱的主要解決辦法:(1)Try running the command prompt as administrator. (我未實踐成功)

(2)To Fix :Run command prompt as administrator, and create the folder. (已實踐)

1 npm install -g express-generator
2 express project_name 3 cd project_name, npm install 4 in webstorm, File | open, choose project_name folder

     (3) 解決方案:

     解決法1:在建立項目時,選擇:下載 express-generator@1.14.1以下 或 下載 @1.15.0 ,但 @1.15.0建立項目時,必須選擇 Version:1.14.1 或以下(已親測試成功).

解決法2 : 

   聲明:(a) 按前面的建議,最好以管理員方式建立使用以下命令。

    (b) 對於 3.X,4.X 版本來說,主要是 express 模塊的安裝,對於 4.X 版本來說,要注意首先需 express-generator 的安裝(必須全局安裝),再才能安裝express(可全局也可當前安裝) 及其他模塊,具體如下:

$ npm install -g express-generator # express-generator 必須全局安裝, 安裝指定版本: npm install -g express-generator@3.5.0
 
         
$ npm install express --save   # express 沒必要全局安裝,但最好 安裝的同時,進行保存,即 加上 --save.  此處 express 最好和 上面的 express-generator 版本一致

$ npm install *** --save # 其他模塊的安裝類似 express 模塊,也可不全局安裝,但最好 安裝的同時,進行保存,即 加上 --save.


此外:要卸載模塊使用: npm uninstall express    

 

4. 創建 nodeJS 項目

  首先要安裝好 nodeJS 使用 框架的相關模塊后,用 IDE 創建項目,出現以上問題,查看原因后,使用 命令行 方式創建項目,再用 IDE 打開即可。創建過程如下:

 (1)先進入你想創建項目的目錄,eg:F:\workspace

 (2 ) 創建項目,創建一個模板引擎為jade,應用名叫 mytest的工程,命令如下:

$ express --view=jade mytest
參數:jade :是創建的項目模板  # 項目模板共有多種
     mytest:是項目名稱

 回車后,出現如下:

 1 create : mytest
 2 create : mytest/package.json
 3 create : mytest/app.js
 4 create : mytest/public
 5 create : mytest/public/images
 6 create : mytest/routes
 7 create : mytest/routes/index.js
 8 create : mytest/routes/users.js
 9 create : mytest/public/javascripts
10 create : mytest/public/stylesheets
11 create : mytest/public/stylesheets/style.css
12 create : mytest/views
13 create : mytest/views/index.jade
14 create : mytest/views/layout.jade
15 create : mytest/views/error.jade
16 create : mytest/bin
17 create : mytest/bin/www
18 install dependencies:
19   $ cd mytest && npm install
20 run the app:
21   $ DEBUG=mytest:* npm start

說明--項目模板(常見的有): ejs,hbs,pug,jade,haml,....等。可使用 express 幫助命令查看已有的模板等,如下:

$ express -h
  Usage: express [options] [dir]
  Options:
    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

(3)按照提示,進入到 mytest 目錄,然后安裝依賴: 

$ cd mytest && npm install   # 該句實際包含兩條命令:進入項目 和 安裝依賴包

(4)安裝完成后,啟動我們的應用:

$ npm start     # 這里需要注意 express 4.x 無法以 node app.js 為啟動方式,而是用指令 npm start 作為啟動

  訪問 http://localhost:3000/ 出現熟悉的 Welcome to Express,證明安裝成功,如下圖:

        

  該項目創建到此就真的完成了!!

此后,就可以用 webstorm 等 IDE 打開該項目,並可以編寫自己的代碼了。

 


免責聲明!

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



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