背景

最近在研究一个ngptcommit命令行工具，然后想通过Rollup+Typescript去编译的时候，发现对Rollup和Typescript的编译配置有点陌生，所以希望通过本文能够对其有个系统的认知。

本文主要是项目编译基础知识，明白其为什么要这么配置，同时能够将项目完整跑起来。

参考项目地址为:node-gptcommit。

背景

今天在看Vite的源码时候，发现有个用法很神奇，代码如下：

1
2
3
4
5
6
7
8

import path, { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { readFileSync } from 'node:fs'

const { version } = JSON.parse(
  readFileSync(new URL('../../package.json', import.meta.url)).toString(),
)
...

源码地址在:vite/src/node/cli.ts

因此想要研究一下为什么要用node:path，而不是直接应用 import path from 'path'呢？下面就来好好分析一下。

背景

今年在github前端领域star上升速度比较主要有以下几个：

• Svelte, 一个将MVVM架构放到构建应用程序的编译阶段实现的框架，让你开发更少的代码实现更多的功能
• Typescript, 几乎所有的前端框架不约而同的支持了Typescript，一个JavaScript的超集，支持变量类型声明
• pnpm，一个现代化的npm包管理工具，采用link方式去全局管理包，这是本文介绍的重点。

因此，选一个和我们项目中开发相关的作为一个知识扩展点，应该就是pnpm了。

背景

这是很久之前的一个念想，当时为了加深自己对js的理解，明白js引擎是如何工作的。
于是从上网找了一个giao-js，感觉还不错，因此想学习一下。

JS引擎

之前有篇文章理解React中Fiber架构(一)中有讲到浏览器进程如何渲染网页和执行js代码的，我们再复习一遍。

一个完整的web网页在浏览器显示和交互的进程（chrome为主），需要涉及到线程主要以下几个部分：

• GUI 渲染线程，负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。
• JavaScript引擎线程，JS内核，负责处理Javascript脚本程序。 一直等待着任务队列中任务的到来，然后解析Javascript脚本，运行代码。
• 定时触发器线程，定时器setInterval与setTimeout所在线程，为什么要单独弄个线程处理定时器？是因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确
• 事件触发线程，用来控制事件轮询，JS引擎自己忙不过来，需要浏览器另开线程协助
• 异步http请求线程，在XMLHttpRequest或fetch在连接后是通过浏览器新开一个线程请求， 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。这里需要注意XMLHttpRequest和fetch的区别，fetch是w3c标准化后一个专门提供给开发调用发起http的API接口，XMLHttpRequest是一个非标准化的Http请求对象，主要是可以发起http请求获取XML数据。

针对JS引擎，官方的定义是：

背景

最近项目开发中使用了qiankun框架去做微前端，我是属于半懂不懂的状态，大概了解过微前端是什么，可以解决什么问题，但是没有并系统的认识和从0实战过。

所以希望通过几篇文章去重新认识微前端这一架构，主要会从几个方面：

• 是什么，以及为什么会出现
• 实现原理，以及主流框架
• 项目实战

背景

今日收集一些好玩有趣的开源api或框架或开源项目

自动生成1000个性化视频

通过Shotstack提供的API服务制作不同视频。

ShotStack是一个基于云的视频编辑API。与Adobe Premiere或After Effects等传统桌面视频编辑应用程序不同，ShotStack纯粹是基于代码的–您可以使用代码创建编辑。该API使用使用JSON的REST架构样式来描述应该如何编辑视频。有许多不同语言的SDK可用于与API交互并创建JSON请求。

是否可以利用该api和小程序结合在一起做一些 生日祝福小视频定制服务。

背景

最近从开源库看到一个很火的项目，就是用一句话画一幅画。

这里虽然他们开源只识别英文，我们可以调用第三方的翻译API转成英文，然后再返回到开源库。

小程序思路：

• 一个人一天体验3次，转发可以获得次数
• 允许转发下载，以及个人签名等
• 提高用户量
• 如果访问量爆发的话，可以继续尝试
• 名字叫随意画

AI生成图片开源项目

stable-diffusion-ui 一句话生成一幅画

背景

最近chatgpt智能对答火的一塌涂地，就是你找chatgpt咨询，它不仅能理解你的意思，还能给出准确的答案，而且能够从上下文理解你的意思。

简单的说，就不再是之前的智能对答，如果遇到不理解的问题回复【我好像不太理解你的问题】。

更有甚者，利用chatgpt完成论文编写，同时还有帮小孩子写作业、程序员利用它整理某个业务的实现思路，作者利用其帮忙写小说细节等等。

我尝试问了一些常规问题，如下图所示，可以更好的理解chatgpt的能力。

1. 如何以Nest.js框架实现用户登录功能

   more >>

背景

开发公共平台项目，测试资源相对比较少，因此对开发者自身而言，为了维护项目的稳定性，需要对平台做各类测试，即使有测试环境，但是也很容易缺乏测试场景导致带着bug上线的情况。

因此我们需要做完整自动化测试方案，来避免这类常规错误，提高平台的可用性和稳定性。

这里先简单描述自动化测试的分类：

• 单元测试，验证独立的单元模块代码或函数是否正常工作
• 集成测试，验证多个单元模块间的协同工作
• UI 测试，只针对前端UI部分测试，后端数据采用mock方式
• 端到端测试，从用户的角度，通过机器来模仿用户在真实浏览器中验证应用交互
• 快照测试，验证程序的UI变化

接下来我们将根据这些测试类如何在项目中落地完整方案。