⭐️ NextJS 插入统计代码 / UmiJS 折腾失败

2021-05-17

今天依旧在搞杂活,有个任务需要在 React 项目里面添加 Google 统计的代码,项目采用的是 NextJS,想要定制页面基础元素,需要创建 _document.tsx 文件。然而,JSX 语法不允许直接编写 <script> 代码,否则 {} 符号会导致解析出错无法使用。

一开始我以为用 dangerouslySetInnerHTML 参数设置就行,然而特殊符号会被转义成 HTML,无法使用。最终我的解决办法就是单独编写一个 JS,除了引入基础文件,其余配置代码都放在这里面。

第二个问题就是需要给 PS 项目搭建一个框架,我尝试用 UmiJS 的 cli 配置了一个带 TS 和 Antd 的脚手架,然而我编写的第一个页面就遇到了问题。当我尝试提交 Commit 的时候,发现会自动运行代码检测。这里面果不其然出现了报错,是 ESLint 检测到我的代码里面存在 import 之后没使用的模块。

我觉得这不是正常操作么,于是打算修改项目下的 .eslintrc.js 文件尝试覆盖配置,但它却并不起作用。查了下 ESLint 和 UmiJS 的文档,前者配置 rules 就可以,后者并没有详细做说明。


去 Google 搜到了一篇 Issue《Umi 如何禁用某个 ESLint 配置呢》这里面没有答案,而且莫名其妙被关闭了。UmiJS 使用的是 fabric 这个项目定义的规范,下面也说是在 rules 定义,然并卵。

至此,UmiJS 折腾基本上是失败了,明早滚回去 NextJS 算了!这玩意虽然也有不太好的地方,但是至少踩的坑会少很多!而 DvaJS 其实也是个不错的方案,但是官方没有良好的 TypeScript 支持,自己搞也不知道会不会出现什么难以意料的情况,总的来说,我现在真是苦不堪言!

今晚则是解决了昨天时间轴的缓存 Bug,外加改了下小窝后台的一些小问题。

配乐 烦躁
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君