iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
1

出處

The generated project

來看看用生產器產生的專案資料夾底下有些什麼玩意兒。

Directory structure

整個資料夾結構如下 ( 無/前綴的就是檔案, 而且很明顯因為有附檔名 ) 。 package.json 記載安裝好的 dependencies 、 定義執行時進入點 ( /bin/www ) 的 script 。 設置一些錯誤處理跟後續載入 app.js 執行剩餘的任務。 App routes 在 /routes 資料夾裡存有個別不同的 module , templates 在 /views 目錄下

/express-locallibrary-tutorial
    app.js
    /bin
        www
    package.json
    package-lock.json
    /node_modules
        [about 6700 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug

package.json

{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11"
  },
  "devDependencies": {
    "nodemon": "^1.18.10"
  }
}

除了之前介紹過的 express & pug , 這邊要來說說其他有用的 package 們:
( 如果看中文版頁面, 會多 body-parser & serve-favicon, 推測是產生器的版本關係, 尚需驗證 )

  • cookie-parser: 解析 cookie header & populate ( 中文版翻為填充, 有看無懂 ) req.cookies ( 一個很方便的 method, 用於存取 cookie 資訊 )
  • debug: 微型 node debug 工具, 以 node 核心 debug 技術建構成
  • morgan: node 的 HTTP req 紀錄器 ( logger ) middleware
  • http-errors: 為 express err handling 建立 HTTP err

以下片段定義我們下 npm start 啟動 server 指令時 start 的 script , 而 devstart script 則要改成 npm run devstart , 兩個路徑都一樣是 ./bin/www

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

www file

/bin/www 是這個 app 的進入點, 最上方的是 required() 進入點 ( 專案根目錄底下的 app.js ), 設置後回傳給 express() obj

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');

關於第一行, stack overflow 上有人提問
What exactly does “/usr/bin/env node” do at the beginning of node files?

Note: required() 是全域函式, 用來引入 modules 到現在的檔案裡。 這裡我們用相對路徑指定 app.js module , 而且省略掉副檔名 ( .js )

這個檔案其他的 code 是有關 node HTTP server 的設置, 如 app port, 偵聽回報 err & connect 。 其餘部分現在還不需要知道 ( 這個檔案全都是樣板 boilerplate ) , 如果有興趣也可以隨時回來看看它


上一篇
26日: Express Tutorial 2: Creating a skeleton websie ( 即改即刷新的 nodemon )
下一篇
28日: Express Tutorial 2: Creating a skeleton website ( 結構 - app.js & routes & views 、 練習題 、 結語 )
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30

尚未有邦友留言

立即登入留言