本文详细介绍了如何从零开始实现 Changesets 的自动化发版流程，涵盖从初始化 Monorepo 项目到配置自动化工作流的全过程。通过合理配置 GITHUB_TOKEN 和 NPM_TOKEN，结合 GitHub Action 和 Changesets 的强大功能，我们成功搭建了一套高效的自动化发版系统。

从零到一：实现 Changesets 自动化发版全流程

Changesets 旨在简化版本管理和更新日志的生成过程。它允许开发者在开发过程中声明变更的发布方式，随后自动化更新包版本、生成更新日志，并发布新版本的包。

Changesets: 一个高效的版本管理工具

EasyEditor 是一个面向扩展的跨框架低代码引擎。

EasyEditor: 一个面向扩展的跨框架低代码引擎

月度摄影 — 2025年1月《大棚》

《燃烧》 → 后现代主义

在最近的项目开发中，我遇到了一个挑战：如何在不修改核心库代码的情况下，通过插件扩展核心类的数据和方法，并确保这些扩展在使用时能够获得类型提示。

Typescript declare 的妙用：类型扩展

这篇文章介绍了文本片段，它允许用户通过URL直接链接到网页上的特定文本，无需依赖页面元素的ID。通过在URL后附加特殊语法，浏览器能够自动定位并高亮显示页面上的特定文本。

比“Ctrl+F”更聪明：直接链接到网页内容

年度摄影 — 2024年 ~慢慢拍照，静静生活~

月度摄影 — 2024年12月 ~慢慢拍照，静静生活~

回顾这一年，我的成长是显著的。如今，我已经能够专门负责前端大屏低代码模块的工作。从最初的迷茫新人，到现在能够独立承担责任，这个过程中我经历了许多，也学习了许多，成长了许多。

我的2024年度总结：工作的第一年

通过本文，我们学习如何实现一个具有拖拽、缩放和定位功能的简易画布。

实现一个简易的可拖拽缩放画布

Signal 机制的核心是使用函数而非直接返回值来管理数据，通过 read 和 set 函数分别获取和设置值，并维护订阅者列表以实现数据变更时的自动更新。 这需要将读取函数设计为函数而非直接返回信号值，以便追踪和管理订阅者，从而实现高效的UI更新。

理解 Signal 是如何工作的

月度摄影 — 2024年11月 ~慢慢拍照，静静生活~

通过这篇文章，主要了解两个方面：
• Solid 的组件编译
• Solid 是如何实现 Signal 的插入和细颗粒度更新的？

Solid 之旅 —— 组件编译 & 如何实现细颗粒度更新的

今天我们来聊一聊HTML中一个较少被提及的标签：<template>。虽然它在页面加载时不可见，但在现代Web框架中却扮演着重要的角色，比如Vue、Svelte和Solid等。

探索HTML中的<template>标签

Cursor 是一款集成了 AI 技术的代码编辑器，作为广受欢迎的 VS Code 的一个衍生版本，它不仅继承了 VS Code 的强大功能，还全面融入了 AI 功能，从而极大地简化了开发工作流。

为什么 Cursor 这么受欢迎？说说我这几个月的使用感受

月度摄影 — 2024年10月 ~慢慢拍照，静静生活~

这篇文章将主要深入解析组件内部props的原理，为什么结构后会导致响应式丢失？

Solid 之旅 —— 为什么 props 被解构后会导致响应式丢失

百度地图的基本使用，简单介绍一下一些基本内容，本文着重关于在 Marker 标注和点聚合这一块。

百度地图的使用（Mark、Cluster…）

月度摄影 — 2024年9月 ~慢慢拍照，静静生活~

对于 React Scheduler，它通过将任务切片并异步执行，避免了阻塞浏览器的主线程。
很多人其实都看到过类似的文章了，甚至说去手写调度器，都写的很不错，所以本文将从一个新的角度探讨 React Scheduler，揭示它是如何利用几个简单的 API 实现这一壮举的。

解析 React Scheduler 原理，Solid 竟也在使用！

想法与思考 — 2024.09.17

月度摄影 — 2024年8月 ~慢慢拍照，静静生活~

想法与思考 — 2024.08.28

在本文中，我将通过三个案例来深入到 Solid 源码中解析 Signal 响应式的原理，并通过图例的方式展示给大家。

Solid 之旅 —— Signal 响应式原理

pnpm monorepo 联调方案

在本文中，我们将深入探讨如何有效地利用 sourcemap 进行 Solid 源码的调试，并探索一些通用的调试技巧，这些技巧同样适用于其他现代 JavaScript 框架。

Solid 之旅 —— 调试源码篇（其他框架也适用）

月度摄影 — 2024年7月 ~慢慢拍照，静静生活~

Solid 框架巧妙地融合了 React 和 Vue 的优点，为开发者提供了一个强大而灵活的工具集，以构建高性能和高度响应的前端应用。

Solid 之旅

月度摄影 — 2024年6月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.06.28

想法与思考 — 2024.06.25

日常摄影 — 2024.06.04

日常摄影 — 2024.06.03

Vlog — 骑行 ”淀山湖“ 🤡

日常摄影 — 2024.06.02

日常摄影 — 2024.06.01

月度摄影 — 2024年5月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.05.31

日常摄影 — 2024.05.31

日常摄影 — 2024.05.30

日常摄影 — 2024.05.29

想法与思考 — 2024.05.28

日常摄影 — 2024.05.28

日常摄影 — 2024.05.27

日常摄影 — 2024.05.26

日常摄影 — 2024.05.25

日常摄影 — 2024.05.24

日常摄影 — 2024.05.23

日常摄影 — 2024.05.22

日常摄影 — 2024.05.21

日常摄影 — 2024.05.20

日常摄影 — 2024.05.19

日常摄影 — 2024.05.18

想法与思考 — 2024.05.17

日常摄影 — 2024.05.17

想法与思考 — 2024.05.16

日常摄影 — 2024.05.16

想法与思考 — 2024.05.15

日常摄影 — 2024.05.15

日常摄影 — 2024.05.14

日常摄影 — 2024.05.13

日常摄影 — 2024.05.12

日常摄影 — 2024.05.11

泰安之旅

青岛之旅

每日摄影 — 2024.04.18

技巧摄影 — 双重曝光

骑行 出发 → 苏州

东平国家森林公园

骑行 出发 → 崇明岛

💙张杰演唱会💙 ^_^

人生第一辆公路车 — 来自大佬的馈赠

使用 Monaco 编辑器的一些总结

日常摄影 —— 2024.03.07

日常摄影 —— 2024.03.06

Array.prototype.with(index, value) 方法会返回对其调用的数组的副本，并将 index 设置为您提供的新 value

使用 Array.prototype.with 更新不可变数组

通过三个星期的学习，大致已经对低代码有了初步的了解了
从一开始的未知，到后面了解学习到的一些概念，如materials、setter、setting、canvas、vm等等内容

TurboLC-Web 小小部署一波

在 Monorepo 中对代码进行规范，使用的工具包括 husky、lint-staged、biome，通过专门建立一个lint包来实现此功能

在 Monorepo 中对代码进行规范(husky + lint-staged)

总结一下最近在公司做需求遇到的一些问题

前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer）

ECharts — 通过ColorPicker控制ECharts图表的渐变色

ECharts — 柱状图相关功能点（柱状样式、顶部装饰、提示框及动画） ^_^

美图一张 ^_^

ECharts — 饼图相关功能点（内环、外环、环形间隔、环形文字、轮播动画）

CheatSheet 一款可以实时显示当前应用的所有快捷键，非常好用！只需要在应用里按一次快捷键(默认 F2)，它就会弹出一个窗口，列出当前应用的所有快捷键列表，包括快捷键组合使用方法等等。这给我使用快捷键带来了极大的便利，可以随时查看忘记的快捷键，不需要频繁搜索查询了。

这款跨平台快捷键显示软件，我用起来超顺手！

GitFlow 工作流（GitFlow Workflow） 是一个 Git 工作流程，可帮助持续进行软件开发和实施 DevOps 实践。它最初由 Vincent Driessen 在 nive 上发行并广受欢迎。Gitflow 工作流定义了围绕项目发行版设计的严格分支模型。这为管理较大的项目提供了一个强大的框架。

Git Flow 的简单使用

在 Deno 中 使用 npm 包

实现物体的关键帧动画和骨骼动画

ThreeJS — KeyFrameAnimation & Bone

ThreeJS — 通过 Ray & Label  来做一个点击物体高亮并提示信息

ThreeJS — Sprite & EffectComposer

ThreeJS — Shadow

对于简单的立方体、球体等模型，你可以通过three.js的几何体相关API快速实现，不过复杂的模型，比如一辆轿车、一栋房子、一个仓库，一般需要通过3D建模软件来实现。

ThreeJS — 外部模型

BR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)

ThreeJS — PBR

网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。

ThreeJS — BufferGeometry

Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

ThreeJS — 入门

通过React Native体验一遍从环境搭建到开发，到最后的打包运行

React Native 从0到1

Electron 从0到1

实现一个小型打包工具

常见面试手写题

一个基于 WebRTC 实现的视频会议的全栈开发项目，支持音频，视频，共享屏幕，消息发送的方式来进行交互。同时项目是基于TypeScript的全栈开发，并使用 pnpm monorepo 进行项目管理

TurboMeet：一个基于WebRTC实现的视频会议全栈开发项目

Daily

English

Tools

Life

Algorithms

DevOps

Project

Photography

Cycling

Travel

Tour

Thinking

Vlog

Comments

Planning

Changesets

EasyEditor

LowCode

Monthly

TypeScript

ServiceWork

JavaScript

ServiceWork 缓存

password

icon

date

type

Edited

slug

status

Created

title

summary

表格

React

前端技术实现文件预览（word、excel、pdf、图片、文本）

Next-generation Node.js and TypeScript ORM
Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

文档类型	npm包
pdf	`pdfjs-dist`
docx	`docx-preview`
xlsx	`exceljs`、`handsontable`、`@handsontable/react`
gif, jpg, jpeg, bmp, tiff, tif, png, svg	自身
txt, md 等文本格式	自身

Buffer的获取

请求

本地

文件处理

Docx

PDF

Excel

Image

Text

文件

参考链接：

JinSo

交流频道

加入我们的社群讨论分享