叮~您有一封Vue.js挑戰邀請函,請查收

null仔發表於2022-07-04
Vue.js

前言

大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一個Vue.js線上挑戰平臺,它提供了一些題庫,開發者可以線上進行挑戰.通過這些挑戰,我們可以進一步瞭解和熟悉Vue.js,希望它能對想學習Vue.js的同學有所幫助.

背景

距離Vue 3.0釋出已經快兩年了,Vue 2.0也在上週五迎來了它的最後一個版本Vue 2.7,週五難道不應該有周五的態度嗎...好吧,那我就週末再Juan起來~
Vue3正式版釋出快兩年了,筆者接觸Vue3也快兩年了 (兩年前一個專案的重構搭上 "One Piece"的首班車).這段時間的實踐沉澱了一些經驗,前段時間我就在想,有沒有可能有這樣一個平臺,大家可以分享自己在工作中遇到的一些Vue.js難題,又可以通過別人分享的經驗受益.在幫助別人的時候,自己也能有收穫,那就太棒了.這也就是vuejs-challenges誕生的由來,希望我們可以在這裡相互分享,共同成長.

介紹

接下來跟大家介紹一下vuejs-challenges :

題庫

vuejs-challenges目前有20多道題目,題庫主要分為兩個維度:

  • 難度

    難度包含熱身/簡單/中等/困難/地獄.挑戰者可以根據自身情況/需求選擇不同的難度進行階段性的練習.

image.png

  • 標籤
    標籤覆蓋了響應式系統API的考察,組合式API的應用以及自定義指令,可組合函式的使用等.挑戰者可以挑選自己比較陌生/不熟悉的模組進行鍼對性的練習.

image.png

題庫才剛建立不久(還在持續補充中),然而一個人的精力和遇到的使用場景是有限的,我想我需要站在巨人的肩膀上,藉著大家的幫助,一起來完善它,為了讓大家能快速簡單的貢獻題庫,vuejs-challenges提供了一套自動化能力.後面我們再來詳細介紹它.

挑戰方式

vuejs-challenges使用Vue SFC Playground進行線上編碼,挑戰者無需任何的安裝和下載便可開啟挑戰,並且實時除錯和預覽.

螢幕錄製2022-07-02-20.23.50.gif

參與貢獻

眾所皆知,一個開源專案的成長離不開社群開發者的貢獻,vuejs-challenges也是如此,大家有以下幾種方式可以參與貢獻:

  • 完善已有題目的測試用例
  • 提供針對題目的學習資料或方法
  • 分享你在真實專案中遇到的Vue.js問題（無論你找到答案與否）
  • 通過在 Issue 下留言幫助他人
  • 分享你的答案或解題思路
  • 提案加入新的題目

解法分享

專案提供了相應的Issue模版,分享人只要選擇模版並提供解法,其他挑戰者在檢索解決方案的時候就可以查詢到了.

image.png

image.png

image.png

提案加入新的題目

專案同樣針對新題目提案提供了Issue模版,開發者只需要根據Issue模版提供的內容準確填充資訊,一個新提案的PR就會被自動生成.這樣開發者就不用閱讀專案本身的程式碼並且熟悉協作流程和規範,大大降低了貢獻新提案的成本.

image.png

image.png

image.png

文件

專案除了基於Github README提供了題庫列表,我們還使用VitePress和Netlify部署了文件,提供給挑戰者多一種選擇.

image.png
順帶一提,VitePress的新版文件是真的帥:

image.png

原理

看完了專案的介紹,相信有些同學會對它的實現原理感興趣,接下來我們就來一探究竟,我們主要分享以下3點:

image.png

線上挑戰連結是如何生成的 ?

前面我們提到了線上挑戰是基於Vue SFC Playground進行的,好,那我們就來看看它的原始碼.

image.png

從上圖中我們可以看到Vue SFC Playground的核心其實是在vuejs/repl實現的.一句話簡單介紹一下它,vuejs/repl是一個用來解析Vue3單檔案元件的互動式直譯器.

我們迴歸到需求本身,我們的需求其實就是將題目轉化為線上Playground連結.這個需求可以拆解為兩個功能:

    1. 讀取題目內容

      這個簡單,對於精通使用Node.js File System API來CRUD的我自然不在話下 ?.

    1. 題目內容轉化為連結

      獲取到了檔案內容,那我們要怎麼將它傳遞給Playground呢 ? 我們先來看一張圖:

abw15-yphz2.gif

通過上圖我們看到,連結的hash值隨著我們的輸入在變化,這就可以確認我們的需求可行性是OK的,接下來我們還是需要去看下vuejs/repl的原始碼,明確它接收的引數格式.這塊的原始碼邏輯稍微有點分散,就不帶大家漫遊原始碼了.vuejs/repl需要提供的連結格式大致如下:

const content = {
 [檔名]: 檔案內容
}
const url = `${SFC_HOST}#${編碼(content)}`

vuejs/repl接收到引數後再進行解碼並建立對應的檔案,這便是整個流程的原理了.

新提案提交的Issue是如何自動生成PR的 ?

這個功能的核心其實就是Github Actions,它是Github在2018年10月推出的一個CI/CD服務.簡單來說就是Github為你提供了一些鉤子和API,能讓你建立你的工作流,做到自動化構建,測試,部署等.Github Actions的靈活性很高,非常好用,它的出現更是為很多開源專案的維護者節約了很多時間和精力.接下來我們簡單介紹一下這個流程:

  • 建立工作流:
# .github/workflows/issue-pr.yaml
# 工作流名稱
name: Issue to Pull Request

# 鉤子,監聽到issue建立和修改,呼叫此工作流
on:
  issues:
    types: [opened, edited]

# 具體邏輯
jobs:
  start:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: cd scripts && npm i --only=production
      # 具體邏輯處理
      - run: cd scripts/actions && npx ...
  • 解析Issue內容並轉換為題庫的內容

這塊的原理其實就是通過正則來匹配相應的模組內容並轉化為建立題庫所需要的檔案內容就可以了,眾所皆知,能用JavaScript實現的最終...你懂的.

  • 提交PR

這個其實就是一個HTTP請求的事情,可詳見Create a pull request.

以上就是Issue轉PR的工作原理.

如何構建題庫文件 ?

前面我們提到了文件使用了VitePress和Netlify進行構建,這裡主要介紹它們.

VitePress介紹

vitepress.drawio (1).png

文件的實現我們主要利用了VitePress約定式路由的特點及Markdown解析的能力.

利用VitePress天然支援的這兩個能力,我們就可以很容易的找到題庫與之的對應關係和文件的呈現.

Netlify

The fastest way to build the fastest sites (用最快的方式構建最快的網站)是Netlify的宣傳語.是的,你要做的事情只有一個,就是將Github專案與它關聯,進行授權.在此之後,一切都是自動的. 最重要的是,它免費 ! 害,真香 ! 對我這個懶人來說,Netlify就是構建網站的神器.

致謝

這個專案的靈感和實現大多來自於 Anthony Fu 的 type-challenges ?.

尤大的 vuejs/repl 讓這個專案成為了可能 ♥️.

結語

文章到這裡就結束了,但挑戰才剛剛開始.vuejs-challenges 期待你的挑戰和貢獻 ?.

如果我的文章和專案對你有所啟發和幫助,請給一個star支援作者 ✌.

相關文章