空谷的技术栈与脚手架模板

我所掌握的技术栈和自用脚手架模板。

相关知识库 ➡️ 空谷的大前端

TOC

• 前端
• 后端
• 模块开发
• 其他

前端

端技术	技术栈	脚手架地址
Web App	React + Umi + antd + antd-style + zustand	➡️ 传送门
浏览器插件	umi-plugin-extensions + WebApp	➡️ 传送门
桌面端	Electron + Web App	➡️ 传送门
小程序	React + Taro + zustand	➡️ 传送门
移动端	TODO	TODO
Sketch 插件	skpm + WebApp	➡️ 传送门
Figma 插件	umi-plugin-figma + WebApp	TODO
AirTable App	block-sdk（AirTable 出品） + antd + zustand	➡️ 传送门

Web App

使用 Ant Design Pro 的脚手架, 可以使用 create-umi 直接创建

$ yarn create umi

? Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  plugin          - Create a umi plugin.

? Do you want to use typescript? (y/N) y

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ● antd
 ◯ dva
 ● code splitting
 ● dll

create abc/package.json
create abc/.gitignore
create abc/.editorconfig
...
...

📋  Copied to clipboard, just use Ctrl+V
✨  File Generate Done

相关链接:

• Create Umi
• Ant Design Pro

➡️ 传送门: Umi Web Template

使用案例：My RChain Wallet、多译

小程序

Taro

➡️ 传送门: 基于 Taro 的小程序模板

使用案例：课否

桌面端

桌面端开发主要使用 Electron ，一个稳定安全的航天级 GUI 基础框架。

个人笔记: Electron

➡️ 传送门: 基于 Umi 的 Electron 开发模板

使用案例：多译

浏览器插件

Chrome 插件开发基础教程 | 个人笔记: Extensions 浏览器插件

➡️ 传送门: 基于 Umi 的 Chrome 插件开发模板

使用案例：Power Yuque

Sketch 插件

➡️ 传送门: Sketch Plugin Template

使用案例：Pan、Microwave、Sketch JSON

Figma 插件

TODO

Airtable App

➡️ 传送门: AirTable App Template

使用案例：airtable-app-mind-flow、airtable-app-user-journal-map

后端

端技术	技术栈	脚手架地址
Serverless	Vercel + Typescript	➡️ 传送门
NodeJS	EggJS + Typescript	➡️ 传送门
Python	Flask	➡️ 传送门

Serverless

➡️ 传送门: Vercel Serverless Api Template

使用案例：空谷的 api

EggJS

TODO

Flask

TODO

模块开发

	技术栈	脚手架地址
单模块模板	Typescript + Dumi + Father + Jest + Typedoc	➡️ 传送门
多模块模板	单模块 + lerna	➡️ 传送门
Umi Plugin 开发模板	单模块	➡️ 传送门
Gitmoji Commit Workflow 模板	commitlint + contenonal-changelog + semantic-release + GCW-Presets	➡️ 传送门

单模块开发

➡️ 传送门: 模块开发模板

使用案例：html2sketch

多模块模板

➡️ 传送门: Monorepo 开发模板

使用案例：uxdm、gitmoji-commit-workflow

Umi Plugin 开发模板

➡️ 传送门: Umi Plugin Develop Template

使用案例：umi-plugin-extensions、umi-plugin-figma

Gitmoji Commit Workflow 模板

符合 Gitmoji Commit Workflow 规范的开发模板

➡️ 传送门: Gitmoji Commit Workflow Template

使用案例： 本人的大部分模板均已经集成了 Gitmoji Commit Workflow 例如: gitmoji-commit-workflow、power-yuque、umi-plugin-extensions 等

其他

puppeteer 自动化脚本

➡️ 传送门: Puppeteer Typescript Template

processing/P5.js

➡️ 传送门: processing/P5.js Typescript Template

License

MIT ® Arvin Xu