最近在写一个自动匹配弹幕的动漫播放器，里面需要使用 FFmpeg 对视频进行解析，但发现如何根据不同的平台打包不同 FFmpeg 到 Electron 里，是个挺麻烦的问题，这篇文章就来讲述下我的解决思路。 安装 用户的电脑很有可能没有安装 FFmpeg，所以我们需要把 FFmpeg 打包进我们的应用里面。 想要在 Electron 开发环境里面导入 FFmpeg 还是比较简单的，只需要安装下面的包，然后就能够在 Electron 中使用了。 pnpm add -D @f...

本文的方式仅限用于 macOS 最近尝试入门了下 Electron 开发，写了一个可以自动匹配弹幕的动漫播放器，期间遇到挺多坑的，写篇文章来记录一下。 代码签名和公证 想要在 macOS 上运行一个桌面端应用，那就必须对它代码进行签名，否则是无法打开，会出现如下错误。 错误提示 Apple Developer 注册 想要进行代码签名就得花 688 元去注册苹果开发者，这里注册也比较玄学...

主要讲下 NestJS 中 IOC 和 五种 AOP 的相关知识点，即 Middleware, Guard, Pipe, Interceptor, ExceptionFilter 的使用和概念 Provider 可以先创建下项目 nest new xxx providers 是可以注入的对象，我们可以把带有 @Injectable() 的 class 放到 Module 的 providers 里声明，因为 Nest 实现了 IOC，这样就会被它给识别到，从而实现依赖注入。 import { Module } from...

我们向后端发起 http 请求时，会要求指定数据传输的方式，通常情况下包含如下 5 种 query url param form-urlencoded form-data json 下面我会讲述之间的区别，并同时列举 axios 和 fetch 的写法。 url param 这个是最简单的，一般用在 GET 请求中，就是直接在 url 后面加上参数，例如： http://localhost:3000/post/7231564187255881765 这种一般用于请求某篇文章之类的。 axios `javascript...

NextJS 最近发布了 13.4 版本，使 App Router “稳定”下来，同时官方 CLI 也将 App Router 变更为默认且推荐的方案，但是 App Router 中引入了 React Server Components （以下简称 rsc ）的概念，且变更了相当多的 API，这使其学习难度更加陡峭。 服务端组件 在 App Router 中，NextJS 将会区分 Client Components和 Server Components， Server Components 是一种特殊的 React 组件，它不是在浏览器端运行，而是只能在服务器端运行。又因为它们没...

我也是最近刚接触到了这些知识，文章可能有些错误，希望大佬多多指点（ 对于学习 TypeScript 了解类型的逆变、协变、双向协变和不变是很重要的，但你只要明白类型的父子级关系，这些概念理解起来就会容易许多，因此在讲述这些之前我们必须先学会类型的父子级关系。 类型的父子级 首先明确一个概念，对于 TypeScript 而言，只要类型结构上是一致的，那么就可以确定父子关系，这点与 Java 是不一样的（Java 必须通过 extends 才算继承）。 我们可以看下面的例子: interface Person { name: string; ...

最近尝试学习了下 TypeScript 的高级应用，正好接触到了模式匹配，写一篇文章来记录下所学内容。 介绍 在 TypeScript 中 extends、infer 关键字是相当重要的，extends 除了可以约束类型以外，还可以进行模式匹配，然后通过 infer 声明变量来进行值的存储，例如下方定义的 Promise 类型： type Result = Promise; 我们要实现一个类型，把 suemor提取出来，使 Result 的值为 suemor，我们可以这样写： type...

完整代码: https://codesandbox.io/s/awesome-margulis-q2xibv?file=/src/index.ts 潜在的问题 在我们平常写代码的时候，可能需要对一个相同的数据进行各种转换，以便满足业务的需求，例如下方社交账号的例子: const social = { bilibili: '291833916', netease: '345345345', weibo: '436453345', } if (social[type]) { // do something } 这样可能可以满足...

本文采用 Jest + React Testing Library 进行单元测试 背景 近期在尝试阅读 arco-design 源码，发现自动化测试对于组件的编写是相当的重要，可自己却对其一窍不通，于是学习了下单元测试的基础，因此写篇博客来记录下。 环境搭建 考虑到 Jest 对于 React 并不能开箱即用，需要对 babel 进行一些配置且还有一些坑，为了简单起见，我们直接使用 cra 脚手架。 npx create-react-app react-jest --template typescript cra 已经帮我们配置好 Jest ...

随着技术栈的迭代，本篇文章已经严重过时，仅供简单的参考，如果跟着敲，会出现很多报错。 前言 最近阅读了下 vite 的文档，发现它有个库模式用来打包挺方便的，因而写篇博客记录下折腾过程。 基本配置 执行如下命令创建一个 React + TypeScript 的项目 pnpm create vite 删除 src 和 public 文件夹，创建 example 和 packages 文件夹，其中 example 存放组件示例或者调试组件，packages 存放组件源码。另外别忘了修改根目录 index.html script路径。 `...