上一章

工 具 链

  • 28 阅读
  • 998 字
下一章

重构前

后端 Express + MySQL,模板引擎为 EJS,前端以 Vanilla.js 为主,混合部分 Vue.js,使用 ESBuild 手搭构建环境。

曾是 Web Component 的狂热信徒,并最早使用 Nesting CSS,直至意识到自己的代码逐渐向框架发展时,不知不觉间要处理的大量数据响应和各种新特性兼容问题。后期试图在编译期间使用 PostCSS 处理 Web Component SFC 中的内联样式,而即便是在牺牲一部分自由度后完成了预期的功能,代码本身的笨重也无法再掩盖下去了。

于是开始尝试 Vue,重写了日文名发生装置歌词打轴两个工具页面。好在找到了支持编译 Vue 单文件组件的 ESBuild 插件,仰仗前人的帮助,在这样一个传统架构的网站中混入了 Vue 的内容。然而这东西就像个毒药,一旦尝到响应式框架的开发体验,就连抗拒的心理都产生不了,满脑子完全是想把更多代码重写一遍的打算了。

这时,网站本体还是多页面的 SSR 模式,每次跳转路由依然会进行耗时的全量渲染。

在重写用户页面的时候,猛然注意到 Vue 应用和原生 JS 没法共享响应式的全局状态,而这所导致的数据不一致简直是灾难性的。为此换了好多种适配的写法,最终囿于能力有限,还是没能解决这个缺陷。

11月10日,开始了基于 Nuxt 的全站重构。

重构后·核心汇总

全栈框架

  • Nuxt.js

  • Vue.js

    在部分文章页启用了运行时编译,因此可能会产生额外的性能开销。

状态管理

  • Pinia

    SSR 环境下,毫无悬念。

样式

  • Sass

    在原子化和语义化之间选择了后者,而在 scopedmodule 之间选择了前者。究其原因都是对简洁易读的 DOM 树的极致追求,并且希望有朝一日搜索引擎也能读懂饱含个性的 Class 类名。

图标

  • FontAwesome

    免费版足以满足大部分需求。前期使用 Web Fonts + CSS,而后转向 SVG + JS。值得一提的是,后者所提供的图标无法应用样式规则 text-shadow,替换方案为算法略有差异的 drop-shadow()

数据库

  • MongoDB

    nuxt-mongoose 插件所提供的类型提示有严重的错误,暂时没有找到解决方法。

文章处理

  • Marked

    采用约定优先的目录结构,自动读取文章并构建索引数据。

代码风格检查

  • ESLint

  • StyleLint

    Lint 类工具所提供的自动修复同样极大地提升了开发体验,而对于样式表而言更是一次配置,一劳永逸。

评论0

60FPS