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 會不同(後述)
Install dependencies
npm install
由於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官方的說明
$env:DEBUG=”*” # 顯示全部
$env:DEBUG=”myapp:*” # 顯示namespace為myapp開頭全部
$env:DEBUG=”*,-express:*” # 顯示全部，但除了namespace開頭為express
將DEBUG指令加到npm start中，以及在vsc terminal執行的結果
- Ref: package.json中指令的操作
How to trace DEBUG (client side)?
Intro & Install browserify
由於前端的js無法像後端一樣，使用require引用模組套件
因此需要browserify將有使用require模組的 js 轉為前端可讀的 js
# 其他專案可能也會使用到，所以全域安裝
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的字樣囉!
转载请注明：XAMPP中文组官网 » [筆記] express + Node.js