共计 2935 个字符，预计需要花费 8 分钟才能阅读完成。
前言
大家好, 我是 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 多道题目, 题库次要分为两个维度:
-
难度
难度蕴含热身 / 简略 / 中等 / 艰难 / 天堂. 挑战者能够依据本身状况 / 需要抉择不同的难度进行阶段性的练习.
- 标签
标签笼罩了响应式零碎 API 的考查, 组合式 API 的利用以及自定义指令, 可组合函数的应用等. 挑战者能够筛选本人比拟生疏 / 不相熟的模块进行针对性的练习.
题库才刚建设不久(还在继续补充中), 然而一个人的精力和遇到的应用场景是无限的, 我想我须要站在伟人的肩膀上, 借着大家的帮忙, 一起来欠缺它, 为了让大家能疾速简略的奉献题库,vuejs-challenges 提供了一套自动化能力. 前面咱们再来具体介绍它.
挑战形式
vuejs-challenges 应用 Vue SFC Playground 进行在线编码, 挑战者无需任何的装置和下载便可开启挑战, 并且实时调试和预览.
参加奉献
众所皆知, 一个开源我的项目的成长离不开社区开发者的奉献,vuejs-challenges 也是如此, 大家有以下几种形式能够参加奉献:
- 欠缺已有题目的测试用例
- 提供针对题目的学习材料或办法
- 分享你在实在我的项目中遇到的
Vue.js问题（无论你找到答案与否） - 通过在
Issue下留言帮忙别人 - 分享你的答案或解题思路
- 提案退出新的题目
解法分享
我的项目提供了相应的 Issue 模版, 分享人只有抉择模版并提供解法, 其余挑战者在检索解决方案的时候就能够查找到了.
提案退出新的题目
我的项目同样针对新题目提案提供了 Issue 模版, 开发者只须要依据 Issue 模版提供的内容精确填充信息, 一个新提案的 PR 就会被主动生成. 这样开发者就不必浏览我的项目自身的代码并且相熟合作流程和标准, 大大降低了奉献新提案的老本.
文档
我的项目除了基于 Github README 提供了题库列表, 咱们还应用 VitePress 和Netlify部署了文档, 提供给挑战者多一种抉择.
顺带一提,VitePress的新版文档是真的帅:
原理
看完了我的项目的介绍, 置信有些同学会对它的实现原理感兴趣, 接下来咱们就来一探到底, 咱们次要分享以下 3 点:
在线挑战链接是如何生成的 ?
后面咱们提到了在线挑战是基于 Vue SFC Playground 进行的, 好, 那咱们就来看看它的源码.
从上图中咱们能够看到 Vue SFC Playground 的外围其实是在 vuejs/repl 实现的. 一句话简略介绍一下它,vuejs/repl 是一个用来解析 Vue3 单文件组件的交互式解释器.
咱们回归到需要自身, 咱们的需要其实就是将题目转化为在线 Playground 链接. 这个需要能够拆解为两个性能:
-
-
读取题目内容
这个简略, 对于精通应用
Node.js File System API来 CRUD 的我天然不在话下 🐶.
-
-
-
题目内容转化为链接
获取到了文件内容, 那咱们要怎么将它传递给
Playground呢 ? 咱们先来看一张图:
-
通过上图咱们看到, 链接的 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 约定式路由的特点及 Markdown 解析的能力.
利用 VitePress 人造反对的这两个能力, 咱们就能够很容易的找到题库与之的对应关系和文档的出现.
Netlify
The fastest way to build the fastest sites (用最快的形式构建最快的网站)是 Netlify 的宣传语. 是的, 你要做的事件只有一个, 就是将 Github 我的项目与它关联, 进行受权.在此之后, 一切都是主动的. 最重要的是, 它 收费 ! 害, 真香 ! 对我这个懒人来说,Netlify 就是构建网站的神器.
致谢
这个我的项目的灵感和实现大多来自于 Anthony Fu 的 type-challenges 🌹.
尤大的 vuejs/repl 让这个我的项目成为了可能 ♥️.
结语
文章到这里就完结了, 但挑战才刚刚开始.vuejs-challenges 期待你的挑战和奉献 🤝.
如果我的文章和我的项目对你有所启发和帮忙, 请给一个 star 反对作者 ✌.
