การจัดการโครงการ Vue.js ในลักษณะของ Monorepo

1. Monorepo คืออะไร?

Monorepo (Mono Repository) เป็นแนวทางการจัดการโค้ดที่เก็บหลายโปรเจกต์หรือหลายโมดูลไว้ใน Repository เดียว ซึ่งเหมาะสำหรับการจัดการโครงการขนาดใหญ่ที่มีการพัฒนาโมดูลหรือฟีเจอร์ที่เกี่ยวข้องกัน

ข้อดีของ Monorepo:

• การจัดการ Dependency ที่ง่ายขึ้น: แชร์ Dependency ระหว่างโมดูลได้
• การบูรณาการที่ดีขึ้น: ฟีเจอร์ที่เกี่ยวข้องสามารถทำงานร่วมกันได้ทันที
• ปรับปรุง Workflow: รองรับการปรับปรุงและทดสอบโค้ดข้ามโมดูลได้ง่าย

---

2. การตั้งค่า Monorepo ด้วย Lerna

Lerna เป็นเครื่องมือยอดนิยมสำหรับจัดการ Monorepo โดยเฉพาะสำหรับโครงการที่ใช้ JavaScript หรือ TypeScript

2.1 การติดตั้ง Lerna

npm install -g lerna

2.2 การสร้างโปรเจกต์ Monorepo

สร้างโฟลเดอร์โปรเจกต์:

mkdir vue-monorepo
cd vue-monorepo

เริ่มต้นโปรเจกต์ด้วย Lerna:

lerna init

โครงสร้างโปรเจกต์:

vue-monorepo/
├── packages/
│   ├── app/        # แอป Vue.js หลัก
│   └── shared/     # ไลบรารีหรือโมดูลที่ใช้ร่วมกัน
├── lerna.json      # การตั้งค่าของ Lerna
├── package.json    # ไฟล์หลักของโปรเจกต์

---

3. การจัดการโมดูลใน Monorepo

3.1 การเพิ่มโมดูลใหม่

เพิ่มแอป Vue.js หลัก:

lerna create app

เพิ่มโมดูลที่ใช้ร่วมกัน:

lerna create shared

3.2 การติดตั้ง Dependency แบบแชร์

ติดตั้ง Vue.js และ Vuex:

lerna add vue --scope=app
lerna add vuex --scope=app

แชร์ Dependency ระหว่างโมดูล:

lerna add lodash --scope=shared
lerna add lodash --scope=app

---

4. การตั้งค่า Vue.js ใน Monorepo

4.1 การใช้โมดูลที่แชร์ในแอป Vue.js

ตัวอย่างในโมดูล shared:

// packages/shared/utils.js
export const greet = (name) => `Hello, ${name}!`;

การใช้งานในแอป:

// packages/app/src/main.js
import { greet } from '@my-monorepo/shared/utils';

console.log(greet('Vue.js'));

4.2 การตั้งค่า Alias สำหรับโมดูล

ตัวอย่างการตั้งค่าใน vue.config.js:

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../shared/src')
      }
    }
  }
};

---

5. การทดสอบและ Deploy ใน Monorepo

5.1 การทดสอบข้ามโมดูล

ใช้คำสั่ง lerna run เพื่อรันคำสั่งในทุกโมดูลพร้อมกัน

lerna run test

5.2 การ Build โปรเจกต์ทั้งหมด

lerna run build

5.3 การ Deploy โปรเจกต์เฉพาะส่วน

Deploy โมดูล app:

cd packages/app
npm run deploy

---

6. การใช้เครื่องมือเพิ่มเติมสำหรับ Monorepo

6.1 Nx

Nx เป็นเครื่องมือที่ช่วยเพิ่มประสิทธิภาพในการจัดการ Monorepo และรองรับโครงการขนาดใหญ่

การติดตั้ง Nx:

npm install -g nx

การเริ่มต้นใช้งาน:

npx create-nx-workspace@latest

6.2 Yarn Workspaces

Yarn Workspaces ช่วยจัดการ Dependency ใน Monorepo ได้ง่ายขึ้น

การเปิดใช้งาน Workspaces:

// package.json
{
  "workspaces": [
    "packages/*"
  ]
}

---

7. เคล็ดลับสำหรับการจัดการ Monorepo

1. กำหนดมาตรฐานการเขียนโค้ด: ใช้ ESLint และ Prettier เพื่อลดข้อผิดพลาด
2. สร้าง CI/CD Pipeline: ใช้ GitHub Actions หรือ Jenkins สำหรับการบูรณาการและ Deploy อัตโนมัติ
3. จัดการเวอร์ชัน: ใช้ lerna version เพื่อจัดการเวอร์ชันของแต่ละโมดูล
4. ทำเอกสาร: สร้าง README.md สำหรับแต่ละโมดูลเพื่อให้ง่ายต่อการเข้าใจ

---

8. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการจัดการโครงการ Vue.js ในลักษณะของ Monorepo โดยใช้เครื่องมืออย่าง Lerna, Nx และ Yarn Workspaces การใช้ Monorepo ช่วยเพิ่มความสะดวกในการจัดการโค้ด แชร์ Dependency และปรับปรุง Workflow ในโครงการขนาดใหญ่

ในบทถัดไป เราจะสำรวจการเพิ่มความปลอดภัยในแอปพลิเคชัน Vue.js ด้วยการป้องกันการโจมตีและการจัดการ Authentication!