Day12 - Express Generator(一) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 12

佛心分享-IT 人自學之術

欸欸!! 這是我的學習筆記系列第 12 篇

Day12 - Express Generator(一)

17th鐵人賽

ayeaye

2025-09-26 23:03:26

8 瀏覽

分享至

前言

前面講完了怎麼手動打造MVC架構，依照慣例，再來就是要找找有沒有更方便的工具，就是今天要整理的Express Generator
這次大概就用兩天的篇幅完成一個簡單的todolist 雖然後面要走的是前後端分離，但mvc的v還是想趁這個機會熟悉熟悉

Express Generator 是什麼？

Express Generator 是 Express.js 官方提供的應用程式產生器，可以快速建立一個具有完整資料夾結構的 Express 應用程式骨架。就像 Vue CLI 或 Create React App 一樣，它幫我們省去了重複建立基礎架構的時間。

為什麼需要 Express Generator？

回想一下我們在 Day 10-11 手動建立 MVC 架構時的步驟：

手動建立資料夾結構：controllers、models、routes、views、utils
設定基礎中間件：body-parser、CORS、錯誤處理
建立路由檔案：手動設定各種路由
設定範本引擎：如果需要伺服器端渲染
建立樣式和靜態檔案架構

Express Generator 一個指令就能完成這些基礎設定！

安裝 Express Generator

全域安裝

# 使用 npm 全域安裝
npm install -g express-generator

使用 npx

如果不想全域安裝，也可以使用 npx：

npx express-generator my-app

基本使用方式

建立基本專案

# 建立名為 express-todolist-generator 的專案
express express-todolist-generator

# 進入專案目錄
cd express-todolist-generator

# 安裝依賴
npm install

# 啟動專案
npm start

查看可用選項

在建立專案前，先了解 Express Generator 提供哪些選項：

express --help

常用選項說明：

選項:
  -h, --help          輸出使用資訊
      --version       輸出版本號
  -e, --ejs           新增 EJS 引擎支援
      --pug           新增 Pug 引擎支援 
      --hbs           新增 Handlebars 引擎支援
  -H, --hogan         新增 Hogan.js 引擎支援
      --no-view       建立無模板引擎的專案
  -v, --view <engine> 新增模板引擎支援 (ejs|hbs|hjs|jade|pug|twig|vash)
  -c, --css <engine>  新增樣式引擎支援 (less|stylus|compass|sass)
  -f, --force         強制建立非空目錄

建立我們的 TodoList 專案

# 建立使用 EJS 模板的專案
express --view=ejs express-todolist-mvc

# 或者使用簡寫
express -e express-todolist-mvc

生成專案結構深度解析

Generator 為我們建立了：

express-todolist-mvc/
├── bin/
│   └── www                 # HTTP 伺服器啟動檔案
├── public/                 # 靜態資源目錄
│   ├── images/            # 圖片資源
│   ├── javascripts/       # 前端 JavaScript
│   └── stylesheets/       # CSS 樣式
│       └── style.css
├── routes/                 # 路由檔案
│   ├── index.js          # 主頁路由
│   └── users.js          # 使用者路由
├── views/                  # 模板檔案
│   ├── error.ejs         # 錯誤頁面
│   ├── index.ejs         # 首頁模板
│   └── layout.ejs        # 共用佈局
├── app.js                  # Express 應用主檔案
└── package.json           # 專案設定檔

核心檔案詳解

bin/www - 伺服器啟動檔案：

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('express-todolist-mvc:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */
var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

// ... 其他輔助函數

app.js - 應用程式主檔案：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

routes/index.js - 路由檔案：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

views/layout.ejs - 共用佈局：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>

views/index.ejs - 首頁模板：

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

與手動建立 MVC 的差異對比

Day 10-11 手動建立的結構 vs Generator 結構

手動建立（Day 10-11）：

express-todolist-mvc/
├── controllers/           # 控制器層
│   └── todoController.js
├── models/               # 模型層  
│   └── TodoModel.js
├── routes/               # 路由層
│   ├── index.js
│   └── todos.js
├── middleware/           # 中間件
│   ├── validation.js
│   ├── logger.js
│   └── errorHandler.js
├── utils/               # 工具函數
│   ├── responses.js
│   └── constants.js
├── app.js               # 應用程式入口
└── server.js            # 伺服器啟動

Generator 生成：

express-todolist-mvc/
├── bin/
│   └── www              # 伺服器啟動
├── public/              # 靜態資源
├── views/               # 模板檔案
├── routes/              # 路由檔案
├── app.js               # 應用程式主檔案
└── package.json

關鍵差異分析

項目	手動建立	Express Generator
MVC 結構	明確的 controllers、models 分離	路由中包含控制邏輯
View 層	無（純 API）	完整的模板引擎支援
靜態資源	手動設定	自動配置 public 目錄
錯誤處理	自定義中間件	內建錯誤處理機制
伺服器啟動	簡單的 server.js	完整的 bin/www 啟動腳本
中間件	自定義模組	預設常用中間件
開發速度	需要從零建立	快速產生基礎架構

Generator 的優勢

1. 快速啟動

# Generator：3 個指令就能啟動
express -e my-app
cd my-app && npm install
npm start

# 手動建立：需要建立多個檔案和設定

2. 最佳實踐

預設包含業界標準的中間件設定
合理的檔案組織結構
完整的錯誤處理機制

3. 前端友善

內建靜態檔案處理
模板引擎整合
CSS/JavaScript 資產管理

參考

https://expressjs.com/en/starter/generator.html

Day11 - Express 中間件

系列文

欸欸!! 這是我的學習筆記共 12 篇

RSS系列文訂閱系列文

0 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

12008 篇

完賽人數

106 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 17th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react

IT邦幫忙

欸欸!! 這是我的學習筆記系列 第 12 篇