主页 | CrabSAMA

CrabSAMA · 笔记

记录程序狗的点点滴滴

问题

在微信修改群名称的时候，发现无法使用多个特定的emoji，但是有许多emoji是可以使用多个的。

无法使用的emoji：👨‍👨‍👧‍👧

思路

由技术常识知道，emoji底层本质上也是Unicode编码的符号，那有没有可能是个别emoji的底层Unicode编码过长导致的呢？我们需要途径去查看emoji的Unicode编码，可以通过这个网站去查看（Unicode Full Emoji List）。这个网站包含了所有最新的emoji，因此加载的时候比较慢。

CrabSAMA大约 2 分钟

Vue2/Vue3共存Monorepo组件库引入VuePress报错

背景

项目结构：Vue2 与 Vue3 共存的组件库，采用 pnpm workspace Monorepo 方式组织仓库。

由于项目中有 Vue2 与 Vue3 的组件，因此需要搭两套文档，Vitepress 与 Vuepress2+只支持 Vue3 的宿主环境，Vue2 的组件库文档只能使用 Vuepress1.x 搭建。

依赖这块，package.json 中以 vue3 为主，vue2 通过别名的方式安装与引用。

//package.json
{
  "devDependencies": {
    "vue": "^3.3.4",
    "vue2": "npm:vue@2.7.15"
  }
}

CrabSAMA大约 3 分钟

正则表达式运行多次结果不一样

背景

// 用于匹配是否被 i18n 块包裹
const i18nKeyPattern =
  /(?:i18n(?:-\w+)?[ (\n]\s*(?:key)?path=|v-t=['"`{]|(?:this\.|\$|i18n\.|[^\w\d])(?:t|tc|te)\()\s*['"`](.*?)['"`]/gm
const str = "$t('当有效期结束时间到了，是否直接下线？')"

// Array(2) ["$t('当有效期结束时间到了，是否直接下线？'", "当有效期结束时间到了，是否直接下线？"]
i18nKeyPattern.exec(value)
// null
i18nKeyPattern.exec(value)

// true
i18nKeyPattern.test(value)
// false
i18nKeyPattern.test(value)

CrabSAMA大约 2 分钟

Vite 引入 monorepo 文件找不到路径

问题现象

在 Vitepress 中引入组件与样式时，报找不到路径的问题。

<script setup>
import { SearchUser } from '@***/bdi-component'
import '@***/bdi-component/dist/style.css'
</script>

CrabSAMA大约 1 分钟

UE5 直接导出视频

参考视频：https://www.youtube.com/watch?v=c39vdC7jloo&ab_channel=AzielArts

在 UE 中，我们可以通过关卡序列导出为视频，但在渲染时，我们只能选择 .jpg 序列，最后渲染出来的其实是十分多的图片，每一帧一张图片，实际上我们的视频就是由无数张图片组成的。另外，音频也会生成一个单独的文件，需要我们手动做合并。

CrabSAMA大约 1 分钟

视频帧类别

TODO i 帧 p 帧 b 帧区别如何使用 ffmpeg 将视频添加满 i 帧

CrabSAMA小于 1 分钟

Props(v-model)变更不生效问题

现象

在我们写 Vue 组件时，经常会遇到自定义 v-model 或 prop.sync 的需求。一般来说，我们有两种方法实现这种需求：

组件内部定义一个变量，使用两个 watch 分别监听 props 和内部变量的变更，前者初始化内部变量，后者在内部变量变更时 emit 一个 input / update:prop 事件使外部变量同步变更。
组件内部使用一个 computed 变量，定义它的 get 方法为获取 props 值，set 方法为 emit 事件。

CrabSAMA大约 2 分钟

unocss 接入踩坑

@apply 指令

由于是 tailwindcss 切 unocss，其中有 @apply 指令还是挺好用的。在 unocss 这边，有两种实现方式：

使用 @unocss/transformer-directives ，该方案仅支持 Vite
使用 @unocss/postcss ，该方案支持 Webpack 但需要安装 postcss

由于项目较大，目前暂时不考虑迁移 Vite ，因此只能采用 postcss 的方案来支持 @apply。

CrabSAMA大约 1 分钟

webpack 升级踩坑

背景

由于项目中 lock 文件被删，重新安装依赖后发现许多依赖都自动升级到最新版本了，因此想着干脆对项目中的依赖进行一次统一升级。在升级了 webpack 后，顺便将一些 loader 也进行升级，升级后出现了一系列的问题。

`mini-css-extract-plugin` 导致 `url()` 引入报错

今天在 1.3.9 版本时，发现 publicPath 设成 '../' 时，引入的字体文件链接变成了这样：src:url([file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf](file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf))

CrabSAMA大约 2 分钟

electron 初体验

背景

在搭建基于 vuepress 的博客时，由于框架是基于 markdown 中的 frontmatter 来获取元数据，现在文章数量大，杂糅着不规范的 frontmatter，有些甚至没有写 frontmatter，因此下意识就想写一个可视化的 frontmatter 编辑器。

由于这里面需要文件读写等操作系统权限，使用 web 应用会捉襟见肘，因此第一时间想到的就是使用 electron 来实现，顺便也可以实践一下 electron。

架构模型

主进程

每个 electron 应用都有一个单一的主进程，作为整个应用程序的入口。主进程运行在 node.js 环境中，意味着它具有 require 模块和使用所有 node.js api 的能力。

CrabSAMA大约 4 分钟

CrabSAMA · 笔记

问题

思路

背景

背景

问题现象

现象

@apply 指令

背景

mini-css-extract-plugin 导致 url() 引入报错

背景

架构模型

主进程

`mini-css-extract-plugin` 导致 `url()` 引入报错