這是在講關於一名叫 Koa 的全端勇士傳說-基礎篇

前言

這是一篇新的學習紀錄,前一系列是 全端勇士之路 Node.js 基礎學習,接下來這一篇將會開始介紹一個新的框架,叫做 Koa.js

Koa.js

老樣子,先來科普一下 Koa.js 是什麼吧~

Koa.js

Koa.js 是由 Express 原團隊所開發的新一代框架,使用方式與操作方式我們後面再來講。

那麼 Koa.js 又有什麼特色? Koa.js 最主要特色是支援 ES 7、ES 8 的最新語法以及它大量的使用了 Async / Await,如果不知道 Async / Await 的人建議可以看我先前寫的以下文章,這樣才不會一下子就被嚇到 ↓

Koa 有分為兩種版本,也就是 Koa 1、Koa 2,但是目前來講若不是特殊需求,大致上都是採用 Koa2 來開發。

※ Koa 的開發環境必須為 Node.js 7.6.0 以上才可以唷~

※ 這一篇開發將會使用滿滿的 ES6 與 ES7,所以建議至少要懂 ES6 再來看此系列。

基礎安裝

那麼 Koa 安裝的方式也是與 Express,但是這邊一樣會從頭介紹如何安裝。

首先先建立一個專案資料夾叫 koa-project,並透過終端機移動到該目錄下

移動到該目錄

然後初始化 npm

1
npm init

(我偷懶輸入 -y,快速生成)

npm init

接下來就是準備安裝 koa

1
npm install --save koa

正常安裝狀況下,koa 會直接安裝第二版的 koa2,而不是 koa1

koa2

起手式

前面有講到 koa.js 是 Express 原團隊所開發的新一代框架,所以其實滿多地方與 Express 雷同,這對於學習過 Express 的人來講是一個福音,只需要會 Express 就等同會 6 成 ~ 7 成的 koa.js 了

那麼我們先來建立一個 app.js 內容如下

1
2
3
4
5
6
7
8
9
10
const koa = require('koa');
const app = new koa();

app.use(async (ctx) => {
ctx.body = 'Hello Koa';
});

app.listen(3000, async ()=>{
console.log('Example app listening on port 3000!');
});

輸入完畢後於終端機輸入 node app.js

node

當出現 Example app listening on port 3000! 時就可以開啟瀏覽器輸入 localhost:3000 來看看是否成功。

Hello Koa

這就是一個基礎的 Koa.js,讓我們稍微比較一下基礎的 Express 與 Koa.js 程式碼差異吧

Express

1
2
3
4
5
6
7
8
9
10
var express = require('express');
var app = express();

app.get('/', function (req, res) {
res.send('Hello World!');
});

app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});

Koa

1
2
3
4
5
6
7
8
9
10
const koa = require('koa');
const app = new koa();

app.use(async (ctx) => {
ctx.body = 'Hello Koa';
});

app.listen(3000, async ()=>{
console.log('Example app listening on port 3000!');
});

可以發現 koa 在建立應用程式的時候必須使用建構子來建立,並且 koa.js 拋棄了 Express 原有的 reqres,改用一個 ctx 的神奇東西,下一篇會來講解 ctx 是什麼東西。