寫在前面

這頁比較多， 但有繁體中文版 ( 剛發現前一天的也有全頁繁體版 ) ，就挑一些重點寫看 30篇能盡量走到哪。

出處

Express Tutorial Part 2: Creating a skeleton websie

貌似會提到一些 route, template/ view, db

Overview

Note: Express App Generator 不是 Express App 的唯一生成器。

Using the app generator

它有很多 tag 可以選用， 我們用 --help ( -h ) 查詢

$ express -h

  Usage: express [options] [dir]


  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -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
    -h, --help           output usage information

官網寫用 Jade當作 template， 不過現在已改名叫 pug。
要用 --view ( -v ) 來選 template， 或兼用 CSS generation engine --css 來選 CSS 預處理器

Note: 其他 template engines 的 tag ( --pug, --hogan, --ejs, --hbs ) 已經棄用。
實驗結果：

$ express --ejs

  warning: option `--ejs' has been renamed to `--view=ejs'

destination is not empty, continue? [y/N] 

What view engine should I use?

有 EJS, Hbs, Pug ( 預設值 ) , Twig, Vash

此外還支援很大量的 template 可以安裝 ， 見此

Note: 如果要使用不支援的 template engine ， 看這裏

選擇 template 要考慮的參考項目如下：

• 學習曲線
• 流行性與活躍度
• 書寫方式 ( 直接來看官網說明 )

某些模板引擎使用特定的標記，來指示在 “普通” HTML內插入的內容，而其他模板引擎使用不同的語法（例如，使用縮進和區塊名稱）構造HTML。

我印象中寫 pug 時可以直接貼上普通 HTML 語法不用修改， 也就是說完全相容 ( 晚點再試一次 ) ， 已證實可以

• 效能 / render 耗費的時間
• 特色， 考慮是否有以下幾點：
  • Layout 繼承， 允許繼承一部分。 ( 有模組化的感覺 )
  • 支援 include
  • 具備簡潔變數、迴圈語法
  • 能夠在 template 層就過濾變數， 像是使變數轉大寫、 格式化日期值
  • 可以產出其他格式， 如 JSON or XML
  • 支援非同步操作及 streaming
  • 不只 c-side， server 上也能使用。 如果可以用在 c-side， 要有能在 c-side render 的功能

這個教學中使用 Pug， 它是現正流行中之一的 template 語言。

What CSS stylesheet engine should I use?

Express App Generator 也可以用 CSS engines: LESS, SASS, Compass, Stylus

Note: 官網這段在解釋 CSS 預處理器。 可以跳過

這裡用預設值的傳統 CSS， 因為這裡不會有複雜的 CSS

What database should I use?

Generator 產生的 code 不包含 db， 不過 Express app 可以用任何 Node 支援的 db mechanism
Express 本身沒有對 db 管理定義特定行為 ( 蛤？ )