用最低调的功能,炫最高调的Deno

2021-09-09 10:32:34 浏览数 (1)

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

缘起

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

源码

项目地址:https://github.com/justjavac/versailles

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 开始!

上图已经是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 仓库大小有限制吗?

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

代码语言:javascript复制
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 就行了:

代码语言:javascript复制
// 引入 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(`


	

0 人点赞