使用 ES6 寫 Koa Web 專案

Neilyozの魚不浪發表於2019-11-29
Web

完整程式碼：傳送門

我們 node.js 只是實現了部分 ES6 的語法，所以為了讓我們 ES6 的程式碼能 100% 在 node.js 下執行，必須使用我們的 babel 把 ES6 程式碼編譯成 nodejs 可執行的程式碼。

  • node 環境：v12.13.1

開發環境搭建

首先，我們建立一個檔案 my_koa

mkdir my_koa && cd my_koa
npm init -y

在我們的 my_koa 資料夾下就會產生一個 package.json 檔案使我們的包配置檔案，內容如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC"
}

然後安裝我們的依賴

npm i --save-dev @babel/cli @babel/core @babel/node @babel/preset-env @babel/register eslint

安裝完成後 package.json 如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.7.4",
        "@babel/core": "^7.7.4",
        "@babel/node": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/register": "^7.7.4",
        "eslint": "^6.7.1"
    }
}

我的習慣是將程式碼放到 my_koa\src 目錄下進行管理，所以執行以下命令建立

mkdir src
touch index.js

歸功於 npm 包管理的便利性，到這裡已經成功了一半了。接下來就是要安裝我們的主角 koa 了

npm i koa koa-router

npm 完成安裝後，此時我們的 package.json 如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.7.4",
        "@babel/core": "^7.7.4",
        "@babel/node": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/register": "^7.7.4",
        "eslint": "^6.7.1"
    },
    "dependencies": {
        "koa": "^2.11.0",
        "koa-router": "^7.4.0"
    }
}

到這裡我們需要的基礎包就已經安裝完成了。可以開始我們的編碼部分。

開啟 src/index.js 檔案輸入一下內容：

import Koa from "koa";
import KoaRouter from "koa-router";

const app = new Koa();
const router = new KoaRouter();

router.get("/", async ctx => {
    ctx.body = "Index";
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

直接執行 node ./src/index.js ，我們會看到是報錯的。因為這裡的編碼並沒有編譯成為 nodejs 認識的形式。

一般我們開發環境可以直接使用 babel-node ./src/index.js 來執行程式碼，因為有安裝 @babel/node 為了方便，我一般會在 package.json 中定義一個命令來直接執行，程式碼如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "babel-node ./src/index.js"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.7.4",
        "@babel/core": "^7.7.4",
        "@babel/node": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/register": "^7.7.4",
        "eslint": "^6.7.1"
    },
    "dependencies": {
        "koa": "^2.11.0",
        "koa-router": "^7.4.0"
    }
}

要執行程式碼的時候只需要

npm run dev

可是開發環境修改完程式碼，總是要執行命令重新載入程式碼。那麼怎麼才能讓程式碼儲存，程式自動載入程式碼呢？

我使用 nodemon 來實現，首先我們要全域性安裝 nodemon

npm i -g nodemon

並且在 my_koa 的根目錄下建立 nodemon.json 檔案來儲存 nodemon 執行需要的配置。

nodemon.json 檔案內容如下：

{
  "exec": "npm run dev",
  "watch": ["src/*"],
  "ext": "js, html, css, json"
}

這時我們還需要在 package.json 加入一個自定義命令，如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "babel-node ./src/index.js",
        "watch": "nodemon"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.7.4",
        "@babel/core": "^7.7.4",
        "@babel/node": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/register": "^7.7.4",
        "eslint": "^6.7.1"
    },
    "dependencies": {
        "koa": "^2.11.0",
        "koa-router": "^7.4.0"
    }
}

這個時候我們執行 npm run watch 再修改 ./src/index.js 的程式碼，程式碼儲存就可以自動載入了。

生產環境程式碼生成

因為src 中的程式碼還是開發環境的程式碼，並沒有透過我們的 babel 進行編譯轉換，所以直接使用 node 是可能無法啟動的，我們需要配置 .babelrc babel 的配置檔案，來告訴 babel 具體要做哪些編譯。

.babelrc 如下：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": true
                }
            }
        ]
    ]
}

然後在 package.json 中定義一個 build 命令，內容如下：

{
    "name": "my_koa",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "babel src --out-dir dist",
        "dev": "babel-node ./src/index.js",
        "watch": "nodemon"
    },
    "keywords": [],
    "author": "Neilyoz",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.7.4",
        "@babel/core": "^7.7.4",
        "@babel/node": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/register": "^7.7.4",
        "eslint": "^6.7.1"
    },
    "dependencies": {
        "koa": "^2.11.0",
        "koa-router": "^7.4.0"
    }
}

執行我們 npm run build 就會在 my_koa 產生 dist 目錄，這個目錄裡面的程式碼就是我們應用於生產環境的編譯程式碼。

本作品採用《CC 協議》，轉載必須註明作者和本文連結
Neilyozの魚不浪

相關文章