原始碼解析 create-vue 快速建立 Vue 專案

Vue 可以透過下面的指令，接著詢問一系列的問題，按照設定快速初始一個專案。(目前版本為 3.6.1)

npm init vue@latest

實際是執行這個 create-vue，想透過原始碼的解析，來了解怎麼樣做一個類似的功能，這個專案架構是如何、如何達成建立專案的功能。

1. playground

運用 git submodules的功能，主要是將各種條件下的樣板做snapshot，形成另一個 create-vue-templates 專案。

2. scripts

顧名思義分別對應到 package.json 的 scripts 所執行的檔案名。

• build
• prepublish
• snapshot
• test

3. template

將程式碼依照性質分成不同的目錄，根據使用者的設定將對應的檔案複製或合成等，形成 Vue 的專案。

• base: 基本必備的程式碼，主要套件為 vue, vite
• code: HelloWorld.vue 元件以及 vue-router 範例程式碼，會分成有無使用 ts 版本。
• config: 裡面每個目錄依照套件名稱命名，目錄包含：cypress-ct, cypress, jsx, pinia, playwright, router, typescript, vitest，目錄裡是安裝套件的設定檔。主要會有 package.json 設定安裝那些套件，後續會將內容與現有設定合併，再來以 cypress 為例，會有 cypress.config.js 及 cypress.config.ts，屆時會根據是否有用 ts 來複製對應的檔案。
• entry: 指的是 vite 打包的 entry main.js，執行 createApp 的功能，總共有預設, pinia, router, pinia+router 這四種版本。
• eslint
• tsconfig

4. utils

目錄及檔案合併等方法都在這個目錄裡，檔名命名已經相當清楚。

• banners.ts: create-vue 指令的 weclome message
• deepMerge.ts
• directoryTraverse.ts
• generateReadme.ts
• getCommand.ts: create-vue 將專案建置完成後，會出現的指令提示 (ex. npm install)
• renderEslint.ts: 根據有無使用 ts, cypress 等建立 .eslint
• renderTemplate.ts: 複製 template/ 內的檔案
• sortDependencies.ts: 依照名稱，排序 package.json 內設定的套件。

5. index

主要邏輯在這個檔案裡

• 讀 argv 指令
• 使用 prompts 詢問一連串問題
• 依照專案名稱等，產生 package.json
• 複製 base
• 複製 config
• 複製 tsconfig
• 產生 eslint
• 複製 entry
• 清除 js or ts 多餘的檔案或重新命名
• 產生 README.md
• 專案已完成，顯示指令提示

拆解過後，我覺得最重要的是如何整理出 template/，讓不同的安裝需求可以拆解出來，有秩序地組成這個初始的專案。

第一個 Vue3 元件測試從 Vitest + Vue Test Utils 開始

延續「mocha + webpack 的 Vue3 元件單元測試」，既然使用 mocha 測試太卡關，這次安裝 Vitest 來試試看！

一、安裝

先安裝 Vitest，另外 Vitest 需要使用 Node >=v14，並安裝 Vite >=v3.0.0，還有 vue3 對應的測試套件

npm install --save-dev vite vitest @vue/test-utils @vitejs/plugin-vue

下面這幾個根據需求來選擇是否安裝

npm install --save-dev jsdom

提供UI介面，可參考 Test UI

npm install --save-dev @vitest/ui

二、設定

先到package.json設定npm指令

"scripts": {
    "test": "npx vitest",
}

在根目錄新增檔案 vitest.config.js

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        Vue(),
    ],
    test: {
        globals: true,
        environment: 'jsdom',
    },
});

常用的設定像是include指定測試檔案的目錄或名稱等，和exclude排除檔案

export default defineConfig({
    test: {
        include: ['**/*.test.js'],
        exclude: ['**/node_modules/**'],
    },
});

設定路徑的alias

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        },
    },
});

或者可以設定 css和setupFiles來套用css style

export default defineConfig({
    test: {
        css: true,
        setupFiles: './src/vitest/setup.js',
    },
});

由 src/vitest/setup.js import css

// src/vitest/setup.js

import 'todomvc-app-css/index.css';
import 'todomvc-common/base.css';

其他設定可以參考官方文件

完成基本設定後，就可以開始寫測試囉！

三、測試

針對現有的元件 TodoListEditor 撰寫測試

import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';
import TodoListEditor from 'components/TodoListEditor.vue';

test('TodoListEditor', () => {
    expect(TodoListEditor).toBeTruthy()

    const wrapper = mount(TodoListEditor, {
        props: {
            todoList,
        },
    });

    expect(wrapper.vm.todoList).toStrictEqual(todoList);
    expect(wrapper.props('todoList')).toStrictEqual(todoList);
});

參考資料

• Vitest (hook & assertion...)
• Vue Test Utils

四、執行

npm run test

執行後就可以看到所有的測試項目及結果，若有錯誤也會對應的訊息顯示

有安裝@vitest/ui，可以開啟ui試試看

npm run test -- --ui

五、CI/CD

有了測試之後，我們利用 github action 設定每次 push 分支時，執行 vitest 的測試，請新增檔案 .github/workflows/test.yml

name: Test

on:
  push:
    branches: main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Before srcipt
        run: npm install

      - name: Test
        run: npm run test -- --run

.github/workflows/gh-pages.yml內的設定：

on:
  workflow_run:
    workflows: ["Test"]
    types:
      - completed

jobs:
  build:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    runs-on: ubuntu-latest

    steps:
      ....

我們的目標是當 Test 成功時，才會執行部屬，否則忽略。請注意 completed 指的是完成時，無論測試結果成功與否都會觸發。因此 if: ${{ github.event.workflow_run.conclusion == 'success' }} 的設定是必要的。

也可變化成 ${{ github.event.workflow_run.conclusion == 'failure' }}，當測試結果失敗時可以發送通知，根據應用情境改寫。

workflows可以設定多項，只要有任何一項執行就會觸發。

安裝 Vitest 來進行 Vue3 測試十分容易。語法跟 jest 很相像，甚至原本的 mocha 寫的測試也一行都沒改，都能夠支援測試。以上的內容有上傳到 github 上(專案)，可以點選下方連結了解執行的內容。

• Create vitest component testing
• Using Github Action workflow for testing