”用最低调的功能,炫最高调的Deno” | 七日打卡

977 阅读5分钟

“我对钱没兴趣”、“我们都是普通家庭,顶多就是我的房子大点”、“定个小目标,先挣它一个亿”、“我之前创业,流水百万,利润也就几十万;现在做一个 965 的打工人,一年也才不到百万而已”……看到这里是,是不是想到了“凡尔赛文学”,如果能有一个“凡尔赛语录“的 github 仓库能记录下这些看似调侃的有趣言论,您会来提交 PR 吗?

缘起

https://versailles.deno.js.cn/

微信群里 JJC 大佬发出了一个链接,我在 PC 端打开便是上面图中所示。凡尔赛?莫非是 Deno 的新特性?怀着对技术的热情和好奇,我先搜索了一下,原来--“凡尔赛文学”是网络热词,和“打工人“、“后浪“、“内卷“等一起入选《咬文嚼字》2020年度十大流行词。“凡尔赛文学”兴起于微勃,比较典型的范式如““老公竟然送了我一辆粉红的兰博基尼,这颜色选的也太直男了吧,哎,怎么跟他说我不喜欢这个颜色呢?”,通俗地来说,“凡尔赛文学”就是“用最低调的话,炫最高调的耀”,慢慢地居然成为了一门学问--“凡学”(PS:驳学表示不服……了解这么多,其实是我和社会脱轨了,和圈子脱轨了,群里大佬张口就来,而我确是一脸懵逼。好在代码开源,作为资深 Copy攻城狮,加上 Deno 对新手入门比较友好,我便开始研(git)究(clone)大佬的代码,挺有趣的!

源码

项目地址: github.com/justjavac/v…

versailles 是一个基于 Deno 的开源凡尔赛语录。Copy攻城狮认为该项目面向 965 的打工人,996 或者 007 哪有时间整这些有趣的项目?当然,如果您和我一样也想写写 Hello World ,versailles 是一个非常不错的选择,通过项目我们可以简单了解 Deno 如何实现基本的 HTTP 服务器;如果您和我一样也是开源参与的小白,通过向这个项目提交 PR 和 Issue 可以简单了解 Git 操作和开源协作流程;如果您和我一样喜欢折腾“副业", 通过学习这个项目可以简单产出文章并且还有机会和业界大佬交流。

废话不啰嗦,“You build it, you run it”,拿起 Git 就是一顿 Clone 操作,Copy攻城狮 灵感来源的第一步,从 git clone 开始!

deno-versailles

上图已经是versailles 的全部代码了。mod.ts文件就是项目的入口文件,遵循 Deno 的开发命名范式,和咱前端项目中的 App.js命名类似,该文件中使用了 Deno 内置的 Http 模块,通过调用 serve 开启一个 8000 端口作为 Web 服务,调用 Deno 内置的 Deno.openDeno.readAllDeno.close等 API 直接读取文件;createHtml.ts文件作为工具函数,主要引入 JJC 写的模板引擎创建 html 字符串;data.txt就是我们能看到的“凡尔赛语录”,如果您有好的“凡尔赛语录”,请大力 提交 PR !提交 PR !PR!

当然,源代码图片中我们也看到了ci.yml文件,这是在.github/workflows目录下,其实用到就是 Github Action,这里就不多介绍。我的历史文章 “Deno 在手,天下我有“,极速获取今日热榜 ,也是拷贝的 JJC 大佬的代码,然后其获取每日热搜的功能也是依赖于Github Action 。其实这里我有一个疑问, Github 仓库大小有限制吗?

看完源码,简单运行下项目:

cd versailles && deno run --unstable --allow-net --allow-read mod.ts

打开127.0.0.1:8000我傻眼了,咦,怎么style.css没有生效呢,仔细一看源码和 Resource ,原来源码中压根就没处理啊。怎么办?

通过咨询 JJC 大佬,原来他在部署的时候施展了 Nginx 魔法,也就是说versailles暂时并未提供部署的指导。于是,我开始了折腾……

“蝶变”

如同开发中直接 Copy 别人代码或引入第三方插件一样,Copy攻城狮也许会遇到一些稍作修改才能正常使用的问题,这次的“凡尔赛语录”也不例外,既然源码中没有提供正常渲染 CSS 的能力,那我们不是得从另外的地方搬些砖来补齐这块的“漏洞”。在尝试过 Deno 原生模块和第三方插件之后,我选择了 ABC ,这感觉--“动静由我,自在轻透薄”(PS:论插件取名的重要性,一遍就 Get)

处理文本的代码保持不变,用 abc 替换原来的 serve 就行了:

// 引入 abc
import { Application } from "https://deno.land/x/abc@v1.2.4/mod.ts";

// 使用轻薄透的 abc 
const app = new Application();

app.static("/assets", "./assets");

app
  .get("/", (c) => {
    const index = Math.floor(Math.random() * count);
    const body = createHtml(words[index]);
    return body
  })
  .start({ port: 8000 });

console.log(`🦕 abc server running at http://127.0.0.1:8000/ 🦕`);

再次运行项目,duang duang duang 搞定!

justjavac-versailles

其实上面的这条语录的确出自 justjavac ,不信评论区求证!哈哈!

今天也尝试了再次使用 Serverless 去部署,结果遇到了坑,现在还没爬起来,这样简洁而又有趣的项目值得我们品味,期待明天能继续产出(PS:听说群里的素材每天够写好几篇文章,比如最近比较火的 PDD)。

祝愿每位掘友都能过上真正的凡尔赛,和心爱的 TA 没羞没臊地快乐生活!