No.60 和 Volar 核心贡献者 Ray 聊 LSP、前端开源和高二生活
01:13:43 Share

好,我们开始吧嗨,大家好新一期的 WebWorks 播客又来了 WebWorks 播客是几个前端程序员闲聊的音频播客节目节目将围绕程序员领域来闲聊聊职场,聊资讯,聊技术选型等只要是和 Web 开发有关的都可以聊因为主播目前都是前端程序员所以会以前端为视角来切入如果你感兴趣,可以加 Auto 的微信新新包包 965,新宝 965 进听友群这次我们是一场技术闲聊

我们邀请到了很多线上的朋友我们邀请到了熟悉的老朋友 Smart 嗨 大家好我是来学习的 Smart 对 我和 Smart 的观念是一样我们是来学习的我们邀请到了几个飞行嘉宾我们邀请到了川哥大家好我是深受陆老师帮助的小川我们邀请到了蚂蚁

各位好我是在学习 Waller 的蚂蚁川哥是我们播客的历史嘉宾我们之前围绕 Viu1 和维绕中文文章翻译聊过一期感兴趣的朋友可以回听去回看

然后蚂蚁是我们听友群的听众听友老哥他也在维护一些和 LSP 相关的一些话题这次刚才已经提到几次了提到了 LSP 和 Vola 还有陆老师这次我们邀请到了陆老师陆老师在刚才提到的几个关键词上做了一些工作来打个招呼吧陆老师嗨大家好我是我叫瑞他们说的陆老师也就是我嗯

我是一个太原的一个门信啊所以这一次跟大家过来学习一下嗯 OK 我是二话音比较牛逼的新宝新宝 Auto 后面可能质子抽空了我们插进来我们随时来关注一下 OK 先问 Ru 老师你为什么叫 Ru 老师是因为锐的发音像 Ru 吗不是 是因为之前我家家里那个

几个人的一些行情的时候,我的微信名字还叫做希腊字母 NamdaNamda 就看着很像中文的 Ru 嘛,所以就提了这个外号我们刚才也提到了几个关键词,一个叫什么 LSB,一个叫 Volat 先问 Ru 老师,这个 Volat 是什么东西,它有什么作用,什么情况下我们会用到它

它官方的简介叫做 Embedded

language framework 就是说是叫做一个嵌套的也不是嵌套吧是类似于内嵌的一个语言的框架什么意思呢就是比如说打比方在 html 那边我们会写到 css js 然后 html 本身然后呢我们的 js 还有 css 是嵌在 sql 块和那个 style 块里面的

在一个类型的语言里面可以写多种不同的语言这个就要作为一种片套的语言吧然后 Volr 的作用就是能够为这些片套里面的语言也提供一样的语言支持而不只是最上层的比如说 HTML 这一个语言提供语法支持 Volr 和 Vue 是什么关系他们是什么样的一个关系

怎么理解一开始 U 的那个 U3 的插件就要走楼了后面的话做着那个做进行了一次重构啊把它凑成一个和语言无关的一个框架

然后就变成了现在的 VLT,也就是 GDL 的 VoLAR,做一个底层的框架现在是有不少的一些语言在使用它比如说有 MBS 还有 Astro 之后可能还会 Svelte 一个加进来,还有甚至 VS Code 它本身也会用到这个框架

听起来这个东西和我们之前用的一些技术还是有关系的川哥和蚂蚁先问川哥川哥之前用过这个工具你对它感受如何如果不了解它你能对 Vola 做一个你的理解吗定义我觉得 Vola 这个东西最大的作用就是可以帮你创建一个怎么说呢因为如果你需要

做一个自己的语言或者说是基于现有的一些语言比如说类似像 HTML 或者 JS 你可能会在因为前端很喜欢导攻框架很喜欢导攻西东西如果你自己想要就创造一套新的语法的时候你很可能不可避免的会首先建立你一个你自己的文件的范式然后你在里面可能会引用到 HTML 可能会引用到 JS

如果你需要同时处理处理这一个文件当中的这个多个语言那你肯定需要一个工具我说的处理是指在呃

帮助用户更好的在 ide 里面使用到它因为可能你的呃一个这个文件把它丢到 vita 的工具链里面去然后把它编译一遍然后转成纯的 js 呃跟大家看起平时看起来没什么两样的 js 也可以用但是用户并不能用你这个东西因为如果你让用户直接像去写纯文本一样去写你的那个框架的那个语言可能就会呃对吧是

没有办法做到的嗯那 vola 其实就是干这个事情的而我之前就是因为啊就是之前呃前几期播客节目我们也提到了我在做一个东西叫做 view by 然后这个东西呢呃是一种新的编写 view 组件的方式那我实际上做的事情是就是呃把

一个 ts 文件里面当中用某种特定的形式然后在这个字符串里面可以写 view 的模板你可以想象到的是个事情是我我本身 ts 这个文件.ts 这个文件本身他自己是有办法可以就是他本身那个 vs code 是自带 ts 的语言服务器的但是

如果你在一个 ts 文件里面你说我的某一个母版字符串里面的我现在告诉你我里面写的东西是 view 的母版但是他是不会给你做任何高量的你也不可能就是说在里面能够拥有像在 sfc 里面就是能够享受到的那些语法的智能补全那些高量那些事实上而 sfc 能够做到这些事情背后就是使用了 VOLA

所以我本职上也是在用 vola 在做同样的事情就是来来做这个语言的嫁接所以呃 vola 我把它就是称作是一种嫁接的工具然后就是因为呃他

有一些特别底层的能力就是在作为接入编辑器的一个框架来说它有一些比较底层的能力就是它可以帮你去做一些就比如说你想把某一个区域的别的语言就比如说对于我的 VueUI 来说我的 ts 里面当中的 Vue 模板那个部分它就是另外的语言也就是它在它的官网简介上说的那个 embedded 嵌入的语言

他用来处理这部分嵌入的语言非常好用因为他做了很多底层的 API 可以帮助你去处理这些东西的映射跟他的映射是为什么他可能会有很多别的概念我让陆老师一会来讲比如说虚拟文件或者什么的对于一个做了新框架的人来说我们肯定是在 IDE 层面我会非常依赖 VoLA 这个东西会需要使用它的各种底层的 API 来帮助我们构建

OK 刚才讲的还是相对更深入一些蚂蚁老哥你对这个 Vola 有理解吗日常用过它吗

我相信日常写 View 的程序员都是会用到的我们可以这样想我们第一次安装 VS Code 然后我们新建了一个.View 文件这个时候其实它是一个就类似于像记事本里去打开的一个文件一样它是掰着黑字然后没有高亮然后我们在写的时候也不会有一些像自动补全或者像我写错了会有错误提示

这些东西其实都是没有的那我们需要去 Vasco 的插件市场装一个 Volr 插件或者说现在叫 Vue Official 插件装了之后点 Vue 这个文件我们再打开它就会有像我刚才说的一些功能从 Vue 语言的这个角度来讲 Volr 其实它提供的是一种对 Vue 语言 SFC 文件的一个智能编程的体验

就是像這些高量啊錯誤提示啊跳轉的定義懸浮提示這些這是從這個語言層面來講其次其實 Waller 他在那個我知道 Waller 這個名字的時候應該是在那個 Vitconf 就是 Astro 的一個老哥他其實是一個維護者然後他去在這個 conf 上提到了這個發布這個 Waller 就是說他作為一個框架形式的一個東西去

来去做语言服务器的一个框架也就是说大家不需要再去从零开始重复造轮子去做一个比如说我新发明了一个语言我叫点蚂蚁这个语言它就不需要我去从零写一个对这个语言的一个智能编程的支持而是可以用 Volard 这样的一个框架更快速的去起步那 Vue 其实现在是在一个 Volard 的基础上去提供了这些智能编程的体验嗯嗯

诸老师听完用户和开发者的介绍你有新的补充和感受吗我觉得说的挺对的其实我想一想

OK 刚才蚂蚁我们就提蚂蚁和川哥呢作为两个不同的身份一个是作为这个普通用户我们说打开一个新打开一个对于普通用户来说打开一个.wav 后缀的文件发现它是黑白的没有彩色也没有智能提示那按了个插件之后就变成彩色了就变成了

我称为什么高亮了有对应提示了发现是这个插件在起这个作用然后川哥呢从这个库的开发作者比如以 V1 为举例呢他需要拓展一种新的写法或拓展一种新的格式需要就用到这种方式来来接入实现他想要的功能那 Volat 呢就提供了这样相应的这个方案陆老师这个当初接触 Volat 的时候你有什么契机来去了解它贡献它使用它呀

我记得我一开始接触到它的时候,一开始用的时候还是叫在 v0 的时候,我是自己在写 U3 项目,然后后来的话,天残是从 5.1 升级到 5.1 的时候出了一个比较大的 bug,就是所有的组件,它类型都变成 ANY 了,就没有类型了,然后后面我去看了看这个项目怎么去 debug,

了解他一些技能原理,发现是一个 TS 的一个改动,不能说是 breaking change 吧,因为它就是一个未定义的行为,他改了这个行为导致 Volat 不能用了,然后我就顺手把这个 Volat 修了一下,然后之后的话就发现这项目其实挺有趣的,它的一些原理啊,还有一些它的内部的实践方式,

比较多的参考我继续去看他别的一些问题反馈然后就顺便去做几个修复然后之后就一直贡献下来这是一个非常经典的路线从普通用户遇到问题或者遇到一个契机去研究背后的问题和背后的原理慢慢就变成了贡献者到最后变成了一个维护者我看到你现在在 wallet 中的贡献度还挺高的是排名比较靠前的位置

现在应该是第二吧不过这个都是在之前做了一些

现在会比较少一点 OK 我们刚才谈到了一些 Volo 的一些基础概念我们现在就重新作为普通用户作为普通开发者来审视刚才提到几个关键词首先就是我们打开一个用 VS Code 打开一个 V 文件或打开一个点什么 Extra 比如我们举例 Extra 就打开一个特定后缀的文件发现它是黑白的我们按了个 X 键然后它就能高亮了这个按

安装插件的这个过程,这个安装插件这个东西和刚才提到的 VLLOG 和这个 LSP 是什么关系 LSP 是什么?陆老师对这个 LSP 怎么理解?它叫做那个 Language Store Protocol 就是那个语言服务器协议实际上就是也可以列成 HTTP 吧,其实没什么区别就是它同一方式不是 HTTP 罢了然后实际上

比如说我们写股东 ts 文件我们可以体验到的功能有自动补全还有一些写入代码时候可以点报错还有我们在可以悬停在那个变量还有和函数之类的标准符上面可以获得一些那个悬停提示比如说或者他类型之类的然后如果说你有时候如果说你看了那个 s code 插件的输出的话你会发现他一直在请求一个叫 ts server 的东西

TES2 就是 TimeScope 官方的语言服务器比如说用户在进行一个输入的操作他就会发送一个叫它忘了反正就是让他发送一个请求然后他就会对当前用户的光标还有他的整个文件或者整个项目进行一个分析分析到他具体应该补全什么东西

然后补充什么东西的话还下一步就返回给 BS codeBS code 就把它装成用可以看到的一些提示然后反显示在它的界面上面然后至于别的什么错误提示那些爆红之类的也是一样的它只要分析到有一些问题它又会显示在它的

它其中都是通过这么一个协议来和它的后端也是可以伺服器来通信的那我理解这个 LSP 我们更多的是认为是一种协议就像我们 HTTP 协议我们前端和后端发生一个和服务端发生一个请求发送一个接口它会返回一个结果或者说类似于 debug 之类的我们在控制台和那个目标服务器能够进行一个交互

麻野老哥对这一块有自己的理解和认识吗你对 LSP 有理解和使用场景吗其实想补充一下辛宝如果我们 VS Code 比如说和 Debugger 去通信的话有另一个协议叫 DAPDebug Adapter Protocol 就是专门的调试用的一个协议这两个和 LSP 可能也是相似的一个东西等同的都是协议

对,都是协议,都是代码编辑器或者说去和其他进程的东西去通信的一个协议。对,那我对 LSP 的一个理解的话,主要是它本身首先它是微软推的一个东西,然后它其实和 VS Code 从实现上是结偶的,但其实都是微软家的技术。

也都是微软家在推比如说像 JetBrains 最近一些 ID 也支持了 LSP 我理解它其实就是一种微软的一个技术影响力的渗透微软的话像 TypeScript、VS Code、LSP 其实是在渗透到更多的技术开发的一些领域去的然后 LSP 本身的话我理解它其实会定义很多的

我看他文档的时候其实是比较晦涩的就是他会定义很多的他更多的声明一些东西但是比如说他会声明一个请求叫做比如叫 hover 就是我的鼠标移到某个变量上这样一个行为那么具体这个行为会发生什么事情它其实是由客户端也就是比如说 VS Code 或者

JetBrains 家的一些像 WebStorm 这样的一些客户端来去实现的比如说它会飘出一个框来然后框的背景色是什么样的其实这些东西都不是协议定的是客户端定的那么服务端要做的事情就是依据这个 protocol 依据这个 LSP 的协议来返回固定的数据固定格式的数据然后它是由数据驱动客户端自己来决定它的一个行为川哥听下来感受如何

我觉得更就是我我我可能更可以从一个就是使用怎么怎么就是从一个酷开发者的角度更多去讲就是关于 LSP 这个东西就是其实我我想顺着刚才新宝引导的那个那条路说下来就比如说当你打开一个

黑底白字的文件然后装了一个 VS Code 它为什么会变高量嗯是首先我想说高量这件事情本身和 LSP 在大部分的文本编辑器或者说代码编辑器当中它其实是解偶的因为呃做高量这件事情其实是呃

比较简单的它其实是另一个话题我们其实也可以同样来讲因为你需要了解这个东西为什么有区别然后你才能了解 LSP 具体是干什么的所以我从另外这个角度来讲就是做高量这件事情本身只跟你当前这一个所谓的语言文件的语法术有关系也就是说比如说

你现在有一个 ts 文件那你里面有一个 function 对吧就我我以最简单的这个例子为例那你的语法数实际上是一个首先是一个 root 块然后里面有一个函数定义的语句然后函数定义语句里面有一个所谓的叫 block statement 有一个块那

所有的这些东西它最后在语言的编译层面它都会有一个叫做 token 序列的东西首先它是词法解析成一个 token 序列然后再组织成一个语法术每一个所谓的 token 就比如说 function 这个关键字为什么它在大部分的你的编辑器的主题里面显示都是一个比较

明明显的颜色就比如说红色啊或者说是一些很亮的颜色这个颜色本身是呃有你的某些配置文件可以去配的但是他为什么知道你这个地方是一个是一整个词他为什么不在 FUNC 那前面是一个是一个词然后后面是一个词这本质上就是因为它是一个独立的 token 这个 token 是词法当中那个非常重要的概念那

你有了你把 token 能够拿到之后你才可以去就是说给每一个相应的 token 去标定不同的颜色因为你每个 token 上面有携带它自己的所谓 token type 就是它的类型的信息就比如说你知道它是一个关键字可能

你在你的那个颜色配置文件里面你就可以写 keyword 点什么什么什么你你可以配啊你的 keyword 想要是红色啊你的呃这个比如说你的花口号想要是蓝色或者是等等这样你可以去配你的颜色所以颜色高亮的实现实质上是这样实现的但是呃

同时你在使用你的代码编辑当中你可能还会做一些比如说刚才蚂蚁提到的就比如说 hover 这样的操作比如说这这这些由客户端出发上来的操作他他想要去想要去显示一些信息比如说呃我在我的那个 view 的表达室里面啊就是 move view 模板上面的表达室上面我想要去让他就 hover 上去我想知道哎

这个这个变量的类型是什么他为什么能够给你显示出那个变量的类型他为什么知道这是一个 rev number 对吧这就是因为

你的整个文件在跟 LSP 的服务器进行通信实际上它是你就把它想成是一个简单的客户端服务器这样一个模型就跟我们本身我们访问浏览器没有什么区别那就只是相当于他发了一种特殊的请求然后去拿到了就是在根据语言服务器当中取回了这部分

呃变量的类型信息而这个服务器本身他为什么能够知道这些呃代码当中的这些类型信息呢就是因为他可能他编译过了这个文件他可能就是呃通过某种方式把这种把这个状态存储在了这个呃服务器的上线文当中然后他在你需要跟他请求的时候他把这些信息返回给你对所以 LSP 本身干的他只就是就是做的这样一件事情对嗯

也就是说你在每你当你想要新建一个新的语言或者是干什么干个什么事情的时候你可能就需要首先要先写一个所谓叫语言服务的东西所以他那个 LSP 当中的 Ls 最重要就是实际上你要去编写的是 Language Service 对嗯

刚刚我云游太虚然后又听了好多突然想起早些年大家都说 Idea 会比 Eclipse 好用然后呢中间又会有一个 MyEclipse 的阶段我在想就我们再界定一个编辑器或者就是说一门编程语言好用不好用是不是主要就是 Language and Service 这方面他有没有花大功夫去把这个去做好如果说这方面做好了

会不会就会说这个编程语言很好用或者说这个开发工具很好用很贴切我们的开发者嗯这我想到川哥在做 ville 1 的一些东西然后想知道川哥这个 ville 1 他会不会

就是因为做这个工具然后比较依赖于我了然后他这两个又是怎么去创歌是怎么去做集成的呢两个问题一个是 language server 的对和编程语言的这个关系重要性第二是这个 v1 的这个部分我看马尼老哥想回答第一个问题吗

可以聊一聊首先语言服务器其实它会有一个技术公司的一些怎么讲算是政治原因吧就是 LSP 本身是微软推的一个东西因此也不是说会每个公司都有一个怎么样的一个非常接受的一个程度

比如说像 JetBrains 其实是非常晚可能就是去年才支持了 LSP 但是因为我们知道 JetBrains 家的 IDE 都是付费的相对的 Zesco 它是一个免费的它会有一些我理解它某种程度上是一个竞争关系

然后其实在 Jazzbrings 支持 LSP 的一个 blog 里也说了我们支持了 LSP 但是它不是我们你可以认为它是一种补充但更多的还是用我们 ID 原生的一些功能去做也就是说我们不是说在我们这任何程序员写代码的时候都是靠 LSP 去做智能编程服务我们自己 Jazzbrings 家的 ID 有

有自己的一套方法论只是也支持了 LSP 你可以把它视为一种补充这是一个方面这是对 IDE 来说可能大家并不是说一定要去很欢迎 LSP 另一方面的话对于编程语言来说其实我了解到大部分语言的编译器它都会内置一个语言服务器比如我印象中 Deno

Deno 的文档里就说了它会有一个源服务器的支持也就是说我们现在可能不一定要用官方的 TS 的源服务器了 Deno 也可以用然后比如说像其他的像私家家我印象中也是有的在其他语言这些可能说他们在开发过程中包括微软家的一些自己的语言他们肯定会对 LSP 的支持会更好川哥 陆老师

我自己是觉得就是任何一个所谓的开发工具然后也好编程语言也好还是说一个框架也好去做跟开发者

体验相关的东西肯定都是我觉得都是一个重中之重的东西就比如说你对于 view 这样一个框架来说你说你 VS Code 里面的插件做不好对吧我日常开发都受阻我怎么好好用所以实际上对于像我想做 VY 这样一个新的编写组件的方式来说我其实也是很愿意把大部分的精力都投在这方面的因为实际上我之所以

等了这么久才发我的那个小小的 0.1 版本就是因为呃我在

就是等嗯 vola 的很多无论是更新也好还是其实是很多我不确定的这个这个呃地方需要改动的东西也好对所以呃这个肯定是很重要的这是毋庸置疑的然后呢我想说就是会正面回答你现在那个问题啊就是说呃 v1 跟 vola 是什么关系那首先我想说我自己的想法是因为本身一开始我做 v1 这个东西纯粹是出于我的兴趣然后呃我

选择去使用 vora 也本质上只是为了学习我事实上我做 vi 这个东西本身整个过程都是为了去学习那呃

我想是把 V1 做成 Vola 最大的一个用户或者说是一个比较大的用户不能说最大吧因为我觉得最大可能是 AstroAstro 就是是最早开始就是说非常完整的而且并且是一个很就是很商业化的可以做的很成功的一个框架去使用 Vola 的对所以我想就是尽可能的去多使用 Vola 当中的各种功能然后我想就是能够

把至少像 V1 这一套编写组件的方式的编写的体验能够做到跟 SFC 基本对齐就比如说你在写一些模板当中的过程的时候我想让你就是拥有跟写 SFC 一样的那种体验对现在可能

好多东西还没有做完但是我们最后一定会做到就是说跟 SFC 有一样的体验然后并且因为我们整个是在一整个 ts 的上下文中所以我会觉得那样编写的体验可能会更爽一点这也是我一开始做这个东西的兴趣点对所以我一定是 vola 的用户并且我也就是非常想要去就是推动 vola 这个这个这个这个工具本身的成长对这个是我的一个

就是设想,嗯,若老师感受如何?我就是川哥其实就有把我找进去做这个呃,这个相关的工作,但我其实没做多少,因为也没有很多时间就是我感觉的话,呃,因为

我们已经有了现有的 Vue 的一些语言的一些基建就是有插件它的一些基础了做一些工作所以说其实我们既然已经有这么一个新的工具了我们还要在一个新的语言里面就是 Vue 1 TS 里面插入一个母版的支持其实就是要把它的它集成进来

这样的集成其实就也是一个 Volat 的理念就是把现有语言用在另一个语言里头所以说我们现在基本的实际上就是用 Volat 用那个语言框架的一些函数反正就是

把生成的虚拟代码同样注入到那个 Viewer1 里头就实现它的一个它的这样的一个支持这个其实工作量比之前可以之前写 Viewer 都是用 Viewer 嘛其实 Viewer 是小了巨多的因为我们没有从头开始实现一个这样一个模板支持的一个

我们没有从头到尾轮子,我们是附用现有的其实这也是 Vova 很重要的一个点因为大家知道最近不是它发了 2.0 吗之前都是 1.0 版本,1.0 有一个 takeover mode 这个其实是让 Vova 里面的 TDS 服务接管 VS Code 自带的这样的话有好处就是因为之前的时间可能有问题它可能响应什么内存这些产品比较大

然后用 TestMode 的话应该会好一点新的那个点换成 TestPlugin 但是有一些问题那个是 Test 那边的现在还没办法修这个的话主要是不同语言阵的集成因为之前那个 Ovmode 是不支持 TestTest 插件的就比如说你开了这 Mode 之后就不能在 Rio 里面写比如说那个 CellCS 那个插件它也是就那个

应该偏 REACT 那些,把 JSX 这一块的一个插件,因为它是通过一条 ts plugin 的东西注入到 ts 的源服务里面,然后通过拦截它的一些东西,实现自定义的一些补全一些,嗯,这么一个功能吧,然后,

同样的话,因为我们是做一个补充,我们也希望它能够作为一个合法组件,一个 UMI 文件能够作为一个合法的组件,在 USMC 里面被调用。这样的话,我们就需要让他们俩可以起工作了。

如果用之前的 U1 的架构是不行的因为它不能支持这么一个操作切换 B2 的话我们可以用 ts plugin 来做我们的这么一个源支持

这样的话就可以从语言里面进行自媒体操作对这里边提到一个 1.0 和 2.0 的概念一会儿我们再来展开刚才我们围绕这个刚才我们围绕这些关键词聊了很多刚才质子也加入讨论质子刚才听下来有哪些地方觉得可以补充和说说你的感受之类的

我对 VoLA 的感受是因为我之前是做 viewmacros 的嘛然后算是比较早的第一批的开始做 VoLA 的对 VoLA 在 view 上面的那个插件然后之前是在 b 站直播然后正巧好像被 johnson 看到了然后他就来来来那个联系我说哎

居然你在写那个 Voila 的插件对然后我主要我我主要是从呃在一个用户的角度上呃选 Voila 和和川哥基本上是差不多的还有就是呃其实川哥做的那个 V1 也是和 Viu macros 的在 Voila 层面上是差不多的一个一个角色吧

Ok 那我我我有一些想补充的点我一会说我因为说完了不好意思对不起 ok 你继续就是呃我想我想说的一点就是我们我们得要把两个概念区分清楚就是我我觉得我们刚才可能说的时候有一点混淆那为了避免听众朋友们就是没有听的特别明白就是我想区分一个概念就是首先 vola 是 vola 然后 view 斜杠

language tools 是 view language tools 这是两个东西而 view language tools 本身跟我们这些所谓的库开发者无论是 view1 也好 viewmacros 也好我们做的东西都是在把 vola 的底层 API 然后封装成一个所谓为自己的框架也好语言也好去写的东西的一个封装的一个工具库这个工具库它是第二层你可以把它理解成第二层第二层做的事情是什么比如说

他会把一个.vue 文件然后他会把它生成呃成各种各样奇奇怪怪的代码只是它的形状非常奇怪但是它是一些从语法上讲然后呃用法上讲非常嗯就是是合法的一个贴字文件那比如说他可能就用了一个方括号去框住了一个变量但是

它也是一种合法的使用某个变量的方式所以你在你的编辑器里面你不会看到说你定义了某一个 ref 然后这个 ref 的变量并没有被使用到它其实是被使用它被使用这件方式的被感知的过程就是通过 vola 生成了一个所谓的虚拟代码然后让它被使用了然后因为你如果只是把它放在一个母版的一个

HTML 的内容里面他是不知道你这个东西是被用到了对不对你得需要某种方式告诉 TS 的服务器你告诉他你这个变量被用到了他 TS 可能会他会报错说你这个变量没有被用到对这是一个很好的例子我只是举这个例子所以我想帮大家区分清楚这个概念然后也想帮大家理解清楚就是说我们这些 Vue Vora 的用户实际上在做的事情是什么

可以认为是一种诱骗器对你可以让你用诱骗这个词我觉得还行听上去好像是这么个意思就是

我觉得挺好的这个词挺好我也没有什么刚才我们围绕若老师听了我们几个嘉宾提供的这些分享的观点和使用场景你感觉他们作为用户或作为开发者对未来的理解正确吗你也对他们使用的过程中有加入他们讨论之类的或者收到他们反馈之类的

这个的话就是刚刚川哥不是提到一个就是可以在木马里面用到变量可以去就是你在使用了它之后可以让 script 块里面的那个里面也被标注为使用到这个的话我想扯的比较远的东西就是

之前 Vita 一开始应该是只支持在 Skrip 块里面的一些这么补全之类的就是基本的 JS 的服务在 template 里面是只有 HTML 没有那些 JS 的补全也没有检查也没有报错应该是单纯 HTML

他好像是在 17 年 Haren.com 就是那个海老师他提了一个想法就是能不能把这个 template 转成一串的 ts 代码然后让 ts 他自己去进行检查然后在我们再把那个反射率报错给他弄回原来的位置上嗯就这个是最基本的想法然后之后他们就实现这个功能

就是把一整个 SFC 弄成一个巨大的 TS 文件然后通过里面的一些我们知道叫 sosmap 就是能够把原文件映射回存储的文件然后对这样子就可以做到一个这样的一个映射然后之后的一些 spell 他们都是走这条路然后因为我们是弄成一个整个完整的一个 TS 文件的话

这样一个文件我们实际上我们把里面的一些差值啊一些一半的一些这样的呃这个指令也是被弄到弄成呃一串的月贴赛马呃现在那个成本之后贴在马里面因为它本身是一个整个的贴层件所以说你的用法都是呃怎么说呢它不是独立的就是因为一整天团队里面它呃只要你一处用到它就会被标为是已经使用了嗯

可能有点绕反正就是说通过生成这么一个 ts 文件的一个方法然后让整个文件能够实现这么一个类型检查后处理也就是最基本的一个不会报一个什么变量没有使用的这么一个操作

我想问一句就是差一句啊那像这个从 Vue 到 TNS 的一个其实是一个编译过程吧我理解它和 Vueloader 做的事情是不是比较相似的还是说它就是用的 Vueloader 呢

这个我可以来补充一下就是我其实想给听众朋友们一个比较真实一点的体感同样我觉得也可以回答到就是满意你这个问题就是大家可以在 VS Code 当中安装一个插件这个插件的名字叫做 voluolabs 我就是 labs 就是 labs 就是实验室的那个插件这个插件不会对你的开发有任何帮助但是如果你真的对

波拉很感兴趣你可以去了解这个插件本身可以去帮助你了解波拉做了一件什么事情它怎么用呢这个插件还是有点用的就是你假如说你现在有个 view 的项目然后我就以你项目里面当中的一个.view 文件为例好然后你现在打开你在编辑器里面打开了.view 的文件然后呢

你接着在你的这个编辑器的左边点开了 Volat Labs 这个插件它会在左边会有一个跟你那个文件啊就是搜索啊那个有一个一样的图标你可以点开它会有一个独立的 panel 然后在这个 panel 里面呢它会罗列出当前你这个点位文件所

输出的三个虚拟文件这三个虚拟文件是由 Volab 在背后帮你生成的然后呢你可以看到这三个虚拟文件是什么呢首先是一个 HTML 这个 HTML 呢就是一个基本的就是跟模板相关的一些基本的 HTML 它做的事情是什么呢

在这个虚拟的 HTML 当中编写的任何内容我换一种方式讲我现在这个说介绍方式可能不太对就比如说你现在你的光标在你.vue 文件的 template 里面然后你现在在某个

空白的地方你可能写了一个 div 你输入了个 div 三个字我们都知道在点位文件你写 div 的时候可能是有 amit 补全的就比如说你写了个 div 然后他会有一个提示然后你敲一个回车他会自动帮你生成一个 d 监控号 div 的那个块

我不知道大家知不知道 AMET 补全这个东西就比如说你还可能用一些比较神奇的 AMET 的东西你可以一连创建 10 个 DIV 这样子对这个 AMET 这个东西本身是 HTML 语言服务的一个背后的功能所以说你在编写 template 的这个区域我假设是第二行到第十行假设第二行到第十行这个编辑在这个块区域的过程当中实质上你是在编写一个

HTML 文件你可以这样理解就实际上你在编写那个虚拟的 HTML 文件当中同时还带了一些 HTML 本身的语言服务所以你你现在知道了哎你写.vue 文件里面那个 Ament 补全是怎么来的好你在这里你知道了好然后你在编写你的 style 块的时候他实际上 Vololabs 告诉你你这个地方编辑出来有一个 CSS 文件他有一个虚拟的 CSS 文件所以同同理可能是第

对吧第 20 行到第 25 行是你的 style 块对吧你在编写 style 块里面的时候你实质上你是在里面写 css 代码所以里面会有 css 的那些提示比如说你输一个 mar 他可能会告诉你你可以输一个 margin 你回车他就出来了对吧这是非常容易的事情同样的在你的 ts 块里面你可能会有一个 ts 的语言服务当然

他当然他倒是没有就是为你的这个这个就是呃

script 块里面的这个 ts 去专门生成一个别的东西因为你本身在里面写的就是 ts 的就是这个语言他实际上你在 script 块里面他做的工作本身是本身现在是由 ts server 接管的他生成的那但是他还会有一个第还会有第三个文件就是第三个文件仍然是一个 ts 文件但是这个 ts 文件如果你在 vloglabs 点开你会一头不睡这个东西是什么你点开之后你会发现是好像是一堆乱码嗯

但是實際上它是有用的這堆亂碼就是剛才若老師說的賴老師之前提出的設想就是把一個母板把 view 當前的母板編譯成一個所謂的 ts 的塊編成一個虛擬的 ts 的文件它裡面就會出現一些什麼東西我舉個最明顯的例子就是

我们都知道 TS 是对某一些变量的类型的那个判断它是有所谓叫类型判断守卫的就我举个例子一个变量它的类型可能是 T 或者是 None 对吧

然后如果你在 view 的母版当中你写 vif 然后这个变量我假设是 xvif x 然后你在 vif 块里面你在使用 x 的时候这个类型理论上它的 none 就应该被去掉了对吧因为你已经进过进行进行了一次判断对吧这里面的东西实际上这个过程在 ts 当中就被叫做类型守卫他已经告诉你了你这里面不可能为空了一定是 t 一定是 t 这个类型那这件事情

是怎么做到的他为什么能够利用到 ts 语言服务的这个能力为什么他能做到这个类型守卫的能力就是因为他生成的那堆乱码一样的代码里面啊有一个 eve 块或者是某种 ts 里面那个代码里面可能进行这个类型守卫的可能比如说可能是一个呃 n 的表达式或者是某种就是就是类型判断过的东西他在 ts 层面他执行了类型守卫所以说

它能夠就是說幫你進行類型守衛所以這個生成的這個虛擬代碼是給模板當中的類型題是用的所以 Volat 實際上在這生成的這三個虛擬文件就是在做這樣的事情然後我們可以提到就是這個虛擬文件的這個概念我們大概講清楚那實際上你在編輯的這個體驗本身也是有 Volat 自己在做的就比如說

就比如说你在编写一些东西的时候实际上它会把你的编写操作映射回它的虚拟文件里面你在写各种各样的东西实际上你也在编写 html 代码文件里面的东西 css 代码文件里面的东西

实际上他创建了一个虚拟的文件如何区分就是刚才蚂蚁老哥提到的 Voila 和这个 Vue Loader 他们是不是有关系有关联我个人觉得可能是两个东西就是确实是不同的两个东西你可以认为是他们做了一样的事情代码转换可能差不太多但是 Vue Loader 也好 Vue Vite 这个 Vue 插件也好实际上

他们做的事情是说把这个 VueSFC 转换成一个 JavaScript 代码然后 Volta 的话他肯定是要保留这类型的

这样解释会对这两个东西产生相似的疑问会有一个回答或者一句话总结一下就是他把 SFCViewloader 把 SFC 输出给打包器用 Volab 把 SFC 输出给编辑器用对就是这样简单他们俩其实都是一样的比如说 Viewloader 还有 View Compiler 然后

然后还有 VoLA 他们做的工作是一样就是把一个 SFC 转成一串代码比如说有 compiler 还有 vuroder 可能叔叔都是 JS 嘛要是要给远远器用的然后呢

Voila 也出一串东西只不过他们的目标的对象是不一样的一个是编辑器一个是温暖器所以说他们达到的目的不一样那 Voila 它的代码也会现得不同就它有大量的那些叫做 Glue Code 它会进行类型 Bitcoin 去做很多的功夫比如说打比方就是我们在

呃,又组件里面使用全局组件的话,在又里面只要一个 missou component 就可以做到,然后这里的话你说可能他是没有,他不知道你有什么注册了什么的权益组件的,应该是不知道啊,我没有用过,然后多到为了做到这个推断的话就需要去呃,我们都知道,又里面决定定义是在一个叫做 global components 里面的一个这样的一个 interface,

OK

OK 那刚才我们这一步讨论其实就相对更深入一点我们讨论了技术的很多技术细节 OK 那我们下半部分回答一些相对更简单一些问题比如我现在在使用 Angler 使用 React 那我会和 Language Server 和 Volet 产生关系吗产生使用上作为普通用户或者作为开发用户来使用它吗

我来说一下这两个吧就 react 因为他不是 tsx 吗这个是有 tssoro 本身就已经支持了他其实相当于是就他是第一张支持的

就跟 TS 他们是一个地位的对当然如果说你把当然看了一个预法团体看来的话它就是一些 TS 这些是一些简化你想要把它转成等价的 GS 代表也是可以的

这只是看他工作是在哪里做的一个是他 JSX 是已经在 TS Server 里面完成了当然如果说你自己想要做一个三方的游戏不可以然后 Angler 的话他也是应该是和目前是跟之前的 Bit 是走的路线的应该是没错不过他们的 JetBrains 也就是 WebStorm 了 WebStorm 他们之前也在使用 VoLLA

这个可以在 Borla 的那个 Discord 里面看到他们刚刚正在和那个 Johnson 进行一些内部实现了一些交流他们也在准备迁移到这个

这个框架来使用后边我们有机会和 Johnson 然后做就是 Villa Waller 的作者 Johnson 我们做进一步的交流说明可以从他的角度去看他去尝试去推广他的作品别人去来接入他的这些相关的服务里边有没有更多有趣的故事

OK 那刚才我们提到了一些其他语言比如其他框架比如 Svelte,比如 Astral 他们现在是 wallet 的用户吗或者说他们和 wallet 产生关系了吗 Astral 已经是了 Astral 之前一段时间应该是自己实现的只不过它后面做了一个比较大的 revector 在一个 PR 里面把它改成了 walla 代码量是减少了非常多的然后 Svelte 现在的话

他现在还是也用的从 VTOL 里面 Fork 过来的一个版本不过 Johnson 现在也是

因为他们做的拆分比较合理都是把那些讯息代码这一块给拆出来了没有和总体实验员那个那个偶合所以说也发了一个 PR 把它迁移到 vola 整体代码就减少了可以说是基本上把约服那块全都砍掉了他们在用的实现的说代码会时间会非常非常少

从侧面看出来那 Volat 作为一个最外的一个最中文包装的一个产品它也是有优势的我们刚才提到能够砍掉很多内容它封装的更好或评别的更好

那我如果刚听了刚才的介绍若老师我如果听了刚才介绍我对想创造一个新的一个后缀的语言像川哥一样去创造一个新的一个后缀格式去拓展我想要的功能或者说我对这个 LSP 本身感兴趣我有哪些方式来去熟悉理解或去尝试开发学习这个 Wallet 或者说这相关的这些素材和知识你有什么建议吗

这个的话其实现在 Volva 是比较缺文档因为最近它其实还是有比较大的一些改动,写意片改动还有一些比较大的那个需求需要先完成所以可能维护者都没有什么时间去写这个文档不过的话可以参考一下那个叫 MDX analyzer 就是 MDX 的那个插件他们的,因为 MDX 是比较简单的一个语言

他们实际上会比较简单这个就可以通过他们的实现来看出来基本上的话就像只要理解几个概念就行了一个是叫呃就是原文件嘛就是你所在编辑的那个文件还有一些叫虚拟文件刚刚都提到很多次了就是生存出来的文件还有最重要的叫做 mapping 就是映射嗯这个 mapping 就是 source map 的映射就我们在开发的时候条件都会用到那个 source map

相当于把原代码的一段代码给映射到圣诞的代码里头然后 VoLA 会在背后帮你处理这个 Mapping 后的这些可不可以给你一些参数来处理要不要把它的报错给它弄到原代码上面把它一些正常提示弄到原代码上面

然后还有一个叫做 calibrated,现在要 hold information 吧就是你这些代码它能够做到什么比如说像 verification 就是能够验证它的代码就是爆火嘛然后像是别的一些智能提示一些代码重构或者说格式化都是可以单独穿出来使用的就给你很多自由度

OK 那其实也结合刚才川哥提到的那个 Labs 那个插件其实我们提供了几个方案我们一个是现在这个文档部分我们已经有一个初步的一个内容了那个看来后续会进步的做一个完善另一个部分刚才陆老师也提供了几个案例我们比如呃

刚才额外提到 MDS 我们去介入这个案例去熟悉和理解去做进一步的对 VOLA 的落地和实践然后刚才川哥提到插件也可以做进一步的理解刚才提到这些链接和这些单词我会在博客的 show notes 里边做一个贴出来然后对这部分感兴趣的朋友可以观察 show notes 的相关链接部分

OK 那我们围绕技术的部分我们刚才深入谈谈了很多然后也照顾到很多人对这个 wallet 的理解还更多的是完全没入门或者说零基础所以我们后续会展开一些更基础的一些内容我们刚才提到这个 wallet 现在变成了这个 2.0 它和 1.0 变化大嘛然后对我们日常用户来说会有一些 break and change 嘛然后用起来会有些需要重新理解或需要声明的一些点嘛

2.0 在 1.0 跟他们的比较上 API 感觉是比较大的这是一个主要的一个 break in change 还有是他们的使用方式就 1.0 的话它是作为一个语言服务器单纯语言服务器来运行的而到 2.0 的话你应该是可以选择你要做语言服务器还是作为一个 ts plugin 来实现 ts plugin 的好处因为之前说过了

然后还有就是主要是 API 改动了那个呃以及一些重命名他们的基础的概念是没有多少变化的嗯

那其实一会儿我们对我就刚才就想到我说对于我们酷开发者来说比如我想参与一个维护一个开源项目其实 wallet 1.0 和 2.0 的这个演进我想必也能收到有一些感悟和采控这个分享你能回想你参与这个 wallet 的维护能想到一些有趣的故事或有趣的人吗采控经历或者之类的这个其实还挺有趣的

一开始我在看代码的时候,它的上层代码的时候我会发现,这它怎么 BAR 和 LAN,CONS 之间会用啊?就是很靠奇。然后后来我发现,大家都知道在 JS 里面 BAR 不是会提升顶层作用率吗?

然后在 TS 里面是我们是不能做到就是一个类型然后从一个作用里面传到另一个作用里头但是你如果通过一些黑魔法比如说你用 Val 来定义一个变量变给给他一个类型还会冒到上层作用里去这样我们带比如说 Vue 的那个 Slot 因为 Slot 它不是或者说组件码它不是

我们是一层套下去的吗所以说这里可能就是他一层套进套进下去的我们可能在什么 vif 里面使用到一个组件我们这时候就需要用 var 来把它的类型传出去然后为可能之后的一些

我还是要提一下就是又是有那个叫做 prop_impertence 的就是一组那个 prop_gitem 这么一个特性的我们现在有一个用户提出一个 feature request 就是能够提示这些 Gitemap 的一些属性就这一点的话我们就需要取到所有的组件的类型

然后取消做到这一点就需要用到这么一个黑魔法因为我就是用 bar 来提升这个组阶的类型的一个

综艺的层级听上去非常 hack 我一会下去一定要学习一下这个东西真是闻所未闻没想到我曾经以为有些已经就是为了兼容性就为了历史兼容性但是很多东西就已经像是被扫进了固纸堆放进了垃圾仓库永远不会拿出来用了结果没想到有一天他居然

人在造福着这个世界哎这种东西还还挺多的比如说呃就大家都知道就是天使的那个 type checker 吧就他的 api 是会有比较大的一些开销我们来生存的时候尽量而是根本没有手上这个东西

因为他如果说用户编辑了一串那个字符之后我们还要对他进行类型检查那可能用户编辑只要只要那个另变几秒我们可能过几秒钟还检查他的类型这时候我们就会非常非常慢才能提示出那个补全这时候不需要看到的

但是我们现在 TS 里头并没有什么好的办法能够检测一个类型是否存在因为在 Vue 里面我们有三个模块 Runtime Core, Runtime DOM 还有 Vue 本身这三个模块呢可以他们提供了叫 Global Components 这么一个 Interface 我们可以在上面注册自己的自定义的组件 Volume 我们需要把它们都收集起来但是

我之前提到我修的那个从 5.1 到 5.1 的这么一个一学期来自于它因为如果说我们在 ps 里面输入 import 某个不存在的包比如说如果你用 pmpm 实际上它是有依赖到就是有依赖到一些 runtime 的 core 的那个库的但是你的根目是没有的这我们会导致一个它会报一个找不到模块的错误然后呢此时的话

呃他变成一个 ANY 然后我们这里在 5.1 之前就是用了一个几艘叫做 is_any 来判断他是不是 ANY 如果是的话就把它转成一个普通的一个空的一个 interface 就不会导致他所有的那些组件类型都变成 ANY 了

但是在 5.1 之后它变成了一个很奇怪的东西就是说它虽然显示出来是 any 但是它实际上不是一个 any 它是一个 arrow 就是你用 isany 判断它判断出来不是我们需要的那个 boolean 就是不是 true 或者 false 它判断出来还是 any 就是它内部一个行为变得也很奇怪嗯这么我就需要用到一个更离谱的操作就是把它

把它用它和空的 interface 那个 intersect 一下给他做一个交集嗯做到他又会变成正常的按钮类型

不上去你们被 ts 坑了然后体操做的更复杂了没错然后现在又出现一个新的问题我们还没办法修就是 5.4 到 5.5 哈哈哈哈我我对此颇有微词啊就是就是 ts 最近五点自从五点几版本之后开始变得非常的恐怖连我都给 ts 提过一个 issue 真的在在我作为我作为非常信赖 ts 和微软的人我我我现在也开始有点质疑了

现在如果说你升级到 5.5 的话你会发现他又不能用了因为他那个行为又变了他现在你不怪病上什么东西他都是变成那个就把就把的一个行为就根本修不了现在还找办法

对 这让我想起来前段时间我们和 ISPAC 的作者我们进行交流他就提到 Webpack 更新一个是版本升级的太快而且每个小版本之间并不完全遵循语意化可能升一个小版本就会产生一个 break change 对于一个底层的 bundler 构建工具来说这是不能忍受的所以他们有进一步的拆分来

因为用户用的这个 TS 可能是版本是完全不同的可能会产生各种各样的问题从陆老师这里也听到了原来这个 TS 随意搞对各种各样的周边工具都产生了不同的影响

其实这个行为要是他们可以改回去的话那倒也好说就提一个 request 的事情但是他们我昨天看了一下昨天是一个 Volat 的 team member 去提了一个这么一个 bug report 结果他们立刻就打上一个叫做 not defect 这么一个标题不是缺陷不是他们的问题因为这个叫做未定义的行为他们不予处理

看起来对于这个 TS 这一块不同的库还是都是有相似的感触的 OK 那我们刚才其实围绕这个 VOLA 和 RU 老师参与这个 VOLA 的这些相关经历我们谈了很多 OK 我们接下来聊一些轻松的话题然后我聊聊 RU 老师重新认识一下 RU 老师 RU 老师你工作多久了然后现在都在忙什么我还在读书嗯

怎么理解读书我现在是高中生现在在读高二我觉得这个感受应该很多人听到的时候会感觉非常的震惊你现在还没上高三是吗

明明就高三了就准备高考曾经我是最年轻的 mute member 然后这个名头被他抢了感为陆老师是哪一年的我是 07 的我们需要我需要沉默一下

你实在太年轻了你是很早就开始接触技术了吗不能说前端了是很早接触电脑下半年了吗大概三十吧就去年 20 年的时候不是因为疫情不是网课吗那时候就在家里的时候那时候就看到别人都在玩自己的个人博客那时候就开始

也搞了自己的博客就开始接触前端后面就逐渐进化就开始到用框架然后用了用就是 w 然后后面就一步步的这么研究下去了你这也不是进化哎你这是究极超进化超进化

那看起来就是你之前卓士你年龄太小了所以看起来你前两年还并不是对技术很熟悉然后这几年你通过自己的摸索和学习现在已经在很多领域就是做的比很多用户很多开发者做的比较深入你是怎么来学的不光是学前端了或者说怎么来学技术有什么崛起吗就是比如说我去了解罗兰他的话就是

我用到一个比较因为罗拉他不是会生成一堆代码吗就基本上就是他送出来代码去那来比照看看是哪里做的这个工作然后他去看看上下文他做了什么然后去慢慢修就一块一块的去理解一下了就知道他大概是怎么弄的然后还有别的一些小项目之类的就是

自己做的项目就是看看自己的兴趣,然后可能给别人的仓库修那么 DPR 也是看看,因为之前我有段时间在那边研究自己的个人的一些开发的配置,就是 ESA Interpretier 这些,之前就碰到一些不少的 Pretier 的 bug,

就他不是发了 3 0 吗有不少的改动然后就一个 f issue 是然后就会顺便去看一看他的代码具体是怎么写怎么工作的嗯

然后就是哪种 JS 的鞋不好看因为它的类型要缺失就不知道它具体那些美容型比如说一个一个对象有什么属性如果说 TS 的话我先去看类型看类型可以知道它具体是有什么有什么东西在定义在里面就比较方便自己去理解

听起来学习的过程和我们和我没什么区别但唯一的不同可能就是我去看有问题好那就不就就看下一个问题这个故事这个故事告诉我们啊就是一般的咱们这些开发者提了 issue 之后是等着修好的开发者牛逼的开发者是提了 issue 之后立马开始自己想着怎么修

我已经我已经扒来了我现在已经积了好几百个 issue 在我的在我的 notification 里面里面一堆的一堆的蓝点以前我都是提了个 issue 立马说这个东西我来秀你们别秀好

那陆老师我们其实在听友中有很多不能说和你一样年轻就是很多还是在上学的学生他们可能刚开始接触技术或刚开始接触前端你有哪些过来人经验怎么去学习理解 JS 或者工程化或者背后的这些各种各样的技术有什么过来人经验吗其实我是有一点变成语言的基础的之前小学那时候

我爸给我买了一本那个编程书就是拍手的一些编程书然后那本书写的非常不错啊就那类似讲故事那种想你怎么去学这个语言然后发现他这种编程语言是一个很好玩一个很有一个很强的工具就可以帮自己实现很多东西然后就自己写代码的时候

也能做到很多自己平时可能要忙好多的工作就觉得很有成就感就一直在学习这个编程然后后面学到 js 的话其实一开始被建设坑很多次因为这实在太太太太太难平了他的一些行为真的是太太丑陋了

然后后面就是呃也是一开始是买了一些书后发现看书不如看 MDN 然后后面就在看慢慢看这些教程别人写的一些博客之类的不是那个自己因为我是现在在玩博客嘛就相当于是在自己自己改的博客就一步步要改什么就看什么就这么一点点知道学习学会了 JS 嗯

你比如学一个新技术,比如刚开始学 JS、TS 这么一个庞大的概念的时候,你是之前是看书呢,还是去看文档呢,还是尝试写一些 demo 之类的,有什么学习方法吗?我就是在写博客嘛,我是在改自己的博客,通过别人已经写好的主题之类的,可以去进行一些改动。

那他会这样大部分的大部分的前端开发者的就是这个初心和就是这个 start place 就是一般都是从鼓到自己的个人博客开始然后然后

这个以最成功的就要以我们往期嘉宾内神为例然后就是感觉大家都非常喜欢鼓捣自己的个人博客内神的博客学不来还强还强感觉四个人都得写一个博客系统作为这个路门也好看起来我们从尝试从小白去尝试学习前的或其他学习外部相关技术的时候做博客做博客做

做博客还是一个非常好的案例的我记得很多人也提到说他最早的初心是克隆了一个别人提供好的代码发现这个钥匙想给那就得发现需要去学 CS 需要去学 HTML 顺手的就把这些点给点上点满之后就自然而然的入门了我觉得这也是一个非常好的学习方案学习路径那么先去拿一个自己喜欢自己在用的东西然后尝试去从一个点去慢慢的去做突破就是所谓的实践里面学

所谓的项目驱动开发对我之前之前查了一下自己第一个 PR 第一个 PR 是给 JS ORG 提的 PR 就是那个免费的那个二级域名之前

之前就想看了别人教程在那边部署自己的博客要这样说的话博客其实不光是前端技术我们为了去搞域名可能被动的就学习了 HTTP 学习了 DNS 去学习了背后的部署可能再深入一点去学了工程化怎么把一开始说我们手动去把编后来说希望用自动化的方式去编慢慢的就把这些工程化 CICD 这些工程也给学会了

一开始学会的是 GitHub 的 PR 操作一开始我因为 JFYG 它的氛围一个是它的官网一个是它的主要一些域名解析的存文件的地方我一开始搞错分支把他的那些 HTML 的配方组分支上面然后被他骂了一顿就关 PR 了就去学一下 Git

对看起来是那其实像内神提供的这种博客方案其实就能学到很多很多的东西我觉得对于小白对于刚学习技术刚学习 web 技术前端技术的人来说是一个很好的方案我们刚才提到协作那我们需要学到 Git 线外的

公众化我们希望自动化懒人的方式我们去改一个文章或者推一个文章做一个随便在某个地方点一下就能自动完成工具的这个部署那么为了想把这个网页部署上去可能被动的去学一些运维或服务器相关的知识那我感觉后续可以向更多人去推荐从自己纯搭一个博客开始博客开始

我又说了博客无所谓了从搭建一个网站开始这里边很多的技术就可以来慢慢的去深入和学习想问一个老生常谈的问题陆老师是如何平衡一天的时间的因为陆老师可能不像我们可能有时候还能摸个鱼

像入老师如果去上学的话是怎么平衡你你学技术和你学主要功课这几这两个的时间以及就是包括你现在这个阶段家里边对你学技术是你是一个什么样的什么样的一个想法家人支持了就是我今天提到我我学这个前端的话是

是在房客时代嘛那个时候就目的老实就比较多一点就基本上每天都可以看学点东西然后现在就回归正轨了就基本上就周末还能还能去看所以说我贡献的企业下降了很多非常非常基本上一周只有那么几个 commit 然后对于我现在学习战机的话

家人挺支持的就是这个之后也可以当自己那个生存的手段嘛之后大学可以学相关的专业然后就是因为不过进来快了因为高考还是希望能够把多多时间放在这个上面就已经一年了一年之后还可以继续到上大学就有更多时间去写了没事看院界留下着你的传说一年之后休息一年然后回来

那时候还给你就说现在其实网络上的一些声音包括就我们周边声音都是前端已死的氛围就陆老师怎么还会想的会把这个作为之后谋生的一个手段呢也不一定前端可以实际上是相关的都是可以的都有时间去取不一定要在那边死磕

非常 nice 你还年轻你还有选择的机会大家都笑那苏老师那你会不会上数学课的时候突然想刚刚昨天晚上看到 A 数我有解决方式了之类的数学课数学老师不会听到的上数学课的话就感觉现在数学数学主要还是服务于考试嘛就其实自己也用不太到

上课的时候基本上都在听老师讲课也没什么时间去暗想或者睡觉屈指罗老师点了个赞看起来入老师再次活跃估计得一年后的现在这会儿高考结束之后周末也是有时间的入老师现在在哪一个城市在哪边上学我在湖州嗯

福州算已经比较相当比较靠南的位置了现在主要是在严阁福建那边高考会容易吗你有了解山河四省这种高考难度偏大这种说法吗对肯定是偏大的他们那边这个难度比他低但我们这边的话难度会相对简单一点点因为毕竟

那我还有最后一个灵魂至极的问题陆老师有心仪的大学吗这个我其实其实对未来没有什么太太好的想法现在基本上就是

就比较比较摆的一个状态就自己刚好就尽量自己去努力能考多少能考多少分多少分能拿多少分能拿多少分尽量把就做到最好的行了也不用想那么多不给太大太多的压力刚刚问了一半我还以为你要说有没有心仪的女孩子你这个年纪对吧不去谈个女高对吧

在这里做开源川哥你别说了再说都沉默了 OK 那我们就这次主要内容就全部结束了我是今天听到很多想进一步去了解看看这个娱乐文档现在建设到什么程度的新矛头 Smart 我建议陆老师报告北京院校的 Smart 这个建议很对川哥

我是期待 Ru 老师在 ViuTV 做大做强的床蚂蚁我是不需要多看看 Waller 圆马和 ViuLoader 的蚂蚁质子我是来自华水的质子 Ru 老师我是我是我是萌新我是萌新 Ru 老师 OK