在Express.js的介紹中我們為Node.js安裝了Express.js這個目前最流行的網頁開發框架(web framework)，並建立了一個testproject。特別的是，由於我選擇使用hogan.js這個由Twitter開發的模版引擎(template engine)以及LESS這個CSS預處理器(CSS pre-processor)，我的指令是這樣的：

express testproject --hogan -c less

--hogan：是指使用hogan；

-c：是CSS的簡稱。

一、Express.js專案的package.json

要檢查這兩項是否安裝成功，可以打開"/testproject/package.json"：

{
  "name": "testproject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.8.6",
    "body-parser": "~1.6.6",
    "cookie-parser": "~1.3.2",
    "morgan": "~1.2.3",
    "serve-favicon": "~2.0.1",
    "debug": "~1.0.4",
    "hjs": "~0.0.6",
    "less-middleware": "1.0.x"
  }
}

可以看到最後兩行：

"hjs": "~0.0.6",
"less-middleware": "1.0.x"

分別代表hogan.js與LESS。

這個package.json文件可以說是這個專案的定義文件。裡面包含專案名，版本等基本資訊。其中值得一提的是scripts段：

 "scripts": {
    "start": "node ./bin/www"
  },

這是在較新版本的Express.js才有的。作用是原本我們用："node index.js"來啟動程式，有了這一句後改為用："npm start"就可啟動程式（要在專案目錄內）。

後面的dependencies段是記錄這個專案所依賴的模組，當你在專案目錄運行："npm install"的時候，Node.js會自動把相依的模組安裝到node_modules裡面。可以看到hogan.js跟LESS都在這裡，而原本的Jade模版引擎則是不見了。

另外要確認hogan.js是否已被啟用，可以打開"/testproject/app.js"，找到15行左右，會有一句：

app.set('view engine', 'hjs');

這裡很清楚的將"view engine"設定為我們想要的"hjs"。

二、Express.js專案的目錄架構

現在我們來看看Express.js為專案創建的其他目錄是些什麼。

1. bin：這是在剛剛的package.json的"scripts"段有提到，它的目的是存放專案啟動指令，包括一些啟動設定。裡面的"www"文件是一個例子，你可以參考來修改。

2. node_modules：存放專案要用到的Node.js模組。

3. public：圖片，Javascripts，CSS等。

4. routes：路由相關。

5. views：網頁模版，也就hogan.js文件存放的地方。

三、總結

今天先瞭解Express.js專案的結構，明天再來深入探討。

[image credit: Aleksi Tappura]