Node.js & Express.js 安裝使用

Node.js學習筆記:Node.js與Express.js的安裝使用

Node.js學習筆記:如何安裝Node.js

Node.js 的安裝非常簡單,Windows用戶只要去到Node.js的官方網站:Nodejs.org下載安裝檔運行安裝即可。

Mac的用戶官網也提供Mac OS X Installer(.pkg)以及Mac OS X Binaries (.tar.gz)檔案。

至於Linux的用戶,官同樣提供Linux Binaries (.tar.gz)以及Source Code。

Node.js學習筆記:初次接觸Node.js

Node.js是以Command Line來運行。Windows的用戶請在執行輸入”cmd”並按下確認或直接啟動”命令提示字元”。

來試試看Node.js的第一個指令,在命令提示字元(command line)輸入並按下Enter:node -v

這指令會顯示當前Node.js的版本。Node.js的指令基本上是以”node”,除非涉及其他套件,例如npm(Node.js Package Manager)。Npm是用來安裝Node.js的相關程式模組,例如Express.js。以下指令會顯示npm的當前版本:npm -v

Node.js學習筆記:使用NPM安裝Express.js框架(Framework)

Express.js是Node.js最受歡迎的Web開發框架,能大大地加快Node.js的網站開發速度。我們可以透過以下指令安裝Express.js:npm install -g express-generator

  • -g: 代表global,也就是所有的projects都能使用Express.js
  • express-generator: 新版本的Express.js要求安裝express-generator,才能自動生成新project。

安裝後就能使用”express”指令,來自動生成一個新project的結構與檔案,例如執行:express testproject。會出現以下的訊息:

create : testproject

create : testproject/package.json

create : testproject/app.js

create : testproject/public

create : testproject/public/stylesheets

create : testproject/public/stylesheets/style.css

create : testproject/routes

create : testproject/routes/index.js

create : testproject/routes/users.js

create : testproject/public/images

create : testproject/views

create : testproject/views/index.jade

create : testproject/views/layout.jade

create : testproject/views/error.jade

create : testproject/bin

create : testproject/bin/www

create : testproject/public/javascripts

install dependencies:

$ cd testproject && npm install

run the app:

$ DEBUG=testproject ./bin/www

代表著以上顯示的這些檔案夾及檔案已被建立。然後你可以根據自己的需要修改或增刪。

注意倒數第四行提示我們要安裝關連模組(dependencies),只要運行它給的指令即可:cd testproject && npm install

serve-favicon@2.0.1 node_modules\serve-favicon

└── fresh@0.2.2

cookie-parser@1.3.2 node_modules\cookie-parser

├── cookie@0.1.2

└── cookie-signature@1.0.4

debug@1.0.4 node_modules\debug

└── ms@0.6.2

morgan@1.2.3 node_modules\morgan

├── basic-auth@1.0.0

├── bytes@1.0.0

├── depd@0.4.4

└── on-finished@2.1.0 (ee-first@1.0.5)

body-parser@1.6.7 node_modules\body-parser

├── bytes@1.0.0

├── media-typer@0.2.0

├── raw-body@1.3.0

├── depd@0.4.4

├── qs@2.2.2

├── on-finished@2.1.0 (ee-first@1.0.5)

├── type-is@1.3.2 (mime-types@1.0.2)

└── iconv-lite@0.4.4

express@4.8.7 node_modules\express

├── cookie@0.1.2

├── utils-merge@1.0.0

├── merge-descriptors@0.0.2

├── cookie-signature@1.0.4

├── escape-html@1.0.1

├── fresh@0.2.2

├── media-typer@0.2.0

├── finalhandler@0.1.0

├── range-parser@1.0.0

├── vary@0.1.0

├── parseurl@1.3.0

├── methods@1.1.0

├── serve-static@1.5.3

├── buffer-crc32@0.2.3

├── depd@0.4.4

├── path-to-regexp@0.1.3

├── qs@2.2.2

├── type-is@1.3.2 (mime-types@1.0.2)

├── proxy-addr@1.0.1 (ipaddr.js@0.1.2)

├── accepts@1.0.7 (negotiator@0.4.7, mime-types@1.0.2)

└── send@0.8.3 (destroy@1.0.3, ms@0.6.2, on-finished@2.1.0, mime@1.2.11)

jade@1.5.0 node_modules\jade

├── character-parser@1.2.0

├── commander@2.1.0

├── mkdirp@0.5.0 (minimist@0.0.8)

├── monocle@1.1.51 (readdirp@0.2.5)

├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)

├── with@3.0.1 (uglify-js@2.4.15)

└── constantinople@2.0.1 (uglify-js@2.4.15)

正如以上顯示,這個指令會建立一個新的檔案夾:node_modules,並會將所需要的關連模組,包括Express.js本身,安裝到裡面。

其中最後的Jade模組是Express.js預設的模版引擎(Template Engine)。Jade最大的特點是語法非常的簡洁,這是優點同時也是缺點。因為學習曲線較陡(跟HTML差挺多的),而且難以與其他人(像只懂HTML的設計人員)溝通。所以很多人喜歡把Jade換成更接近HTML的模版引擎,其中目前最受推崇應數:Handlebar.jsHogan.js。兩者都是基於Mustache,所以語法很相似。Handlebar.js被很多大項目採用,像Ghost,功能比Hogan.js要豐富。而Hogan.js則比較新,由Twitter開發,追求速度(比Handlebar.js稍快),已獲得不少的關注與使用。這兩者都是很好的選擇,我個人傾向Hogan.js。如果你要用Hogan.js來取代Jade可使用以下指令來建立新項目:express testproject –hogan

另外Express.js也支持LESS跟Stylus兩種CSS預編繹語言(Preprocessor),你想要使用LESS的話,可以用:express testproject –hogan -c less

-c 就是CSS的意思。

Image Credit: Aleksi Tappura

2 Comments

  1. 你好, 因為我一直沒辦法把jade檔 換成 hogan.js
    我的步驟如下
    1. npm install -g express-generator
    2. express testproject –hogan (這裡建出來的View 資料夾依舊是jade預設的
    3. cd testproject && npm install
    是有哪邊錯誤嗎? 我是用 Cloud9 的IDE

    • 不好意思 我解決了我的問題了^^


Add a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料