最近在写一个自动匹配弹幕的动漫播放器,里面需要使用 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路径。 `...