开发与构建

GAGU 所有的代码都在同一个仓库里，由三部分构成：

gagu
|- gagu-back-end
|- gagu-front-end
|- gagu-website

项目中只上传了 yarn.lock 文件，所以使用 yarn 而不是 npm 来安装依赖，可以确保我们在开发坏境的运行结果是一致的。

构成

前端

为了最大程度地减少包的体积，项目独立出来后，逐步移除了原本使用的 UI 组件库 BlueprintJS，换成了可以按需加载的 SemiUI。

同时移除的还有 Windows 的壁纸和 MIUI V5 图标，单色图标也从 Carbon Design System 换成了 RemixIcon。几乎所有的图标都使用自 RemixIcon，即使是内部应用的图标也是从中选取至 Figma 编辑而来。

整体仍然使用了 React + TailwindCSS 的组合，构建后的体积非常小。

# dev
$ cd gagu-front-end
$ yarn
$ yarn start

后端

在选型时对比了几种常见的框架，最终选择 NestJS 的原因很简单，因为它采用了 ES6 的模块语法，且对 TS 有着良好的支持。

还有就是考虑到前、后端的代码会放在同一个仓库，切换上下文时，统一的代码风格或多或少能降低一些切换成本。

# dev
$ cd gagu-back-end
$ yarn
$ yarn start:dev

网站

尝试一下 Astro，第一次使用它。

# dev
$ cd gagu-website
$ yarn
$ yarn start

构建 NPM 包

1. 更新以下版本信息：

• version field 位于 ./package.json
• GAGU_VERSION 位于 ./gagu-back-end/src/utils/constant.util.ts
• version field 位于 ./gagu-website/.env

2. 同步 ./gagu-back-end/package.json 中的生产环境依赖项到 ./package.json 中

3. 执行构建脚本 npm run build:npm，参考 ./build-npm.sh

4. 预发布检查，更新包体积信息，发布到 NPM

构建二进制版

1. 二进制版的构建需要先完成上一步骤

2. 然后安装好 ./package.json 中的依赖，是的，这有点冗余，这是最初决定将三部分放至同一仓库造成的，好在问题不大

3. 在 gagu 目录下执行 npm run build:pkg，你需要事先全局安装好 Vercel/pkg npm i -g pkg

4. 构建后的内容会出现在 ./pkg 中

感谢

参考项

1. SVG 压缩：SVG在线压缩合并工具
2. useClickAway: useClickAway.ts
3. 音频频谱效果：做一个酷酷的音乐频谱
4. 调用 IINA：Chrome_Open_In_IINA
5. JSON 格式化：json-format
6. 扫描 100+ 文件：readEntries
7. 红外码格式：「一块钢板的重生」——7年前的小米4还能干什么
8. 小米红外码：哪位大佬有小米电视的红外遥控码

依赖项

整个项目中还用到了很多依赖：

@craco/craco  axios  chalk  express-zip  github-markdown-css  gm  lodash  luxon  md5  minimist  music-metadata  node-disk-info  piexifjs  qrcode.react  react-hot-toast  react-i18next  react-markdown  react-photo-view  react-rnd  recoil  rehype-raw  remark-gfm  thumbsupply 

如果没有他们，我的工作量将是巨大的，十分感谢。