iT邦幫忙

1

[筆記] express + Node.js

Intro

express與express-generator的差別?

  • express : 建立normal web架構
  • express-generator : 建立web app架構 (equal to 應用程式)

Installation

npm install -g express-generator

Initiate a new app

建立專案資料夾名為 'myapp' 的應用程式
--git 自動加入.gitignore,把所有可以不用push上repo的檔案/資料夾都幫你寫好
-v or --view 選擇server side要使用的template engine,這邊使用pug (前身為jade)

express -v pug --git myapp
# for more information
express -h

建立完成後的架構如下
注意:其中 run the app 指令是有問題的,且 win & osx 會不同(後述)

  • command line 提示 (PowerShell)
    command line 提示 (PowerShell)
  • 實際的資料夾結構 (程式進入點在 bin/www)
    實際的資料夾結構 (程式進入點在 bin/www)

Install dependencies

cd myapp
npm install
  • package.json中可以看到此專案相依套件清單
    執行npm install後將會安裝的相依套件 (package.json)

How to trace DEBUG (server side)?

由於express-generator有幫我們安裝debug
所以執行npm start 前可以把需要顯示的debug設定好

SET DEBUG=myapp:* ; npm start
// 或是
$env:DEBUG="myapp:*" ; npm start
# myapp:* 顯示全部
# 注意:windows無法使用 "&" 連接兩個要執行的command,需使用";"
# 官方是說windows & PowerShell (win10)的指令不同,不過目前試過都可以
# 但如果你的vsc是PowerShell就只能使用2.
# 可將整串指令加入package.json中scripts.start內 (但只支援1.寫法)
  • debug官方的說明
    debug官方的說明
# DEBUG環境的設定
$env:DEBUG="*" # 顯示全部
$env:DEBUG="myapp:*" # 顯示namespace為myapp開頭全部
$env:DEBUG="*,-express:*" # 顯示全部,但除了namespace開頭為express

How to trace DEBUG (client side)?

Intro & Install browserify

由於前端的js無法像後端一樣,使用require引用模組套件
因此需要browserify將有使用require模組的 js 轉為前端可讀的 js

npm install -g browserify
# 其他專案可能也會使用到,所以全域安裝

Edit relative file

  • public/javascripts/index.js
var debug = require('debug')('myapp:index-client')
debug('hello!')
  • 轉為前端可讀懂的js:
browserify index.js -o index_bundle.js
  • 於前端頁面 views/index.pug 引入
extends layout
block content
    script(src='/javascripts/index_bundle.js')
    h1= title
    p Welcome to #{title}
  • npm start 後連入 http://localhost:3000/
  • 開啟chrome (F12),可以看到console有印出我們debug的字樣囉!

尚未有邦友留言

立即登入留言