[Node.js]Express GeneratorーWeb應用程式產生器的使用方式

Photo by Anna Jiménez Calaf on Unsplash

使用Express Generator應用程式產生器，可以快速建立express web 應用程式的架構。

安裝

1.Global安裝

Express Generator要如何安裝？首先，請使用下列指令來進行global安裝：

$ npm install express-generator -g

2.查閱可用參數

global安裝完畢之後，可以使用下面的指令來查閱參數：

$ 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

如果想要在專案中使用ejs樣板，就可以在接下來的步驟時，加上-e與 — ejs的參數。如果要使用sass等預處理器，可以用-c 。

3.建立專案

global安裝完畢後移動到指定資料夾。在該資料夾下使用下面指令建立你要的應用程式專案。最後面的名稱就是你的專案名稱。

$ express -e --ejs myProject

輸入完畢後，會建立下面的檔案，其中預設的style樣式是css：

如果想要在專案中使用SASS的預處理器：

$ express --css sass myProject

輸入完畢後，會建立下面的檔案，其中預設的樣版引擎是jade：

如果同時想使用ejs與sass的話，可以這樣子寫：

$ express --view=ejs --css=sass myProject

或是：

$ express --view ejs --css sass myProject

• –view 表示專案要使用的樣板解析方式(包含 ejs、pug、 handlebars、 hogan.js 等)
• –css 要使用什麼 CSS 預處理器（包含less、stylus、compass、sass等)

輸入完畢後，則會建立以下的檔案：

你可以比較一下，與第一個建立的檔案有什麼不同？

下面的部分在myProject/public/stylesheets/地方，建立的是SASS檔案（style.sass）而在上面的部分則是CSS檔案（style.css）。這樣子可以暸解如何使用參數了吧。

接下來，移動到專案的資料夾裡面。

$ cd myProject

在專案資料夾，安裝相關套件：

$ npm install

安裝完相關套件後，啟動應用程式：

$ npm start

然後開啟瀏覽器，輸入 http://localhost:3000/. 就可以看到首頁了。

此外，你也可以使用除錯模式啟動伺服器：

$ DEBUG=myproject:* npm start

深入專案架構

接下來我們進來看看Express Generator幫我們做了哪些事？下面是初始化專案後產生的檔案架構。

bin/www

這是整個程式的進入點。預設監聽的port為3000。在package.json裡面：有個start對應到 bin/www 檔案。所以在command line下面輸入 npm run start 時，會啟動伺服器。

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

app.js

進入app.js。相關的中介軟體middleware都寫在這裡。當bin/www啟動時，會被載入。

middleware，例如可以用來解析cookie的cookie-parser、HTTP請求的日誌morgan、可以解析SASS（SCSS）的node-sass-middleware、設定路由的router、設定靜態檔案位置的static等等。

views/資料夾

裡面是EJS樣板存放的位置。初始化的時候，會先提供兩個樣板：

• index.ejs: 首頁時使用
• error.ejs：錯誤時使用

routes/index.js

為進入首頁時(localhost:3000/ )的路由。如下，進入這個路由時會使用到views裡面的index.ejs樣板。

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

可以在這裡加上其他的路由：

例如下面我加了一個/self的路由。重新啟動伺服器後，你可以在localhost:3000/self 看到結果。

/*self define*/
router.get('/self', function (req, res, next) {
    res.render('index', {
        title: 'self'
    });
});

我們可以利用這個方式，把相類似的路由放在同一個檔案，便於管理。

選擇SASS或是SCSS

使用預處理器來寫CSS，可以進入專案的 app.js，尋找以下這段：

app.use(sassMiddleware({
    src: path.join(__dirname, 'public'),
    dest: path.join(__dirname, 'public'),
    indentedSyntax: true, // true = .sass and false = .scss
    sourceMap: true
}));

indentedSyntax: true 這是安裝後的狀態，也就是說你可以撰寫SASS語法。

• false 代表 SCSS
• true 代表 SASS

如果想要在專案中撰寫SCSS語法的話可以把這一段修改為 false 即可。

你還可以加上outputStyle來設定產出的css要呈現什麼狀態。

outputStyle: 'compressed',

或者是設定是否為除錯的模式。

debug: true,

結語

你可以以這個為基礎，把以前學到或者使用到的套件安裝上來使用。例如你可以安裝nodemon，這樣子就不用每次修改檔案就要重新啟動一次。

如果學會如何使用Express Generator，以後建立專案從這裡開始的話，可以節省很多時間。