🔥 oiyo & unibest = 又新又好的 uniapp 模板

1 阅读4分钟

og-image.png

👋 朋友们好!我是 skiyee,也可以叫我 sky ,我们今天用 oiyo 给 unibest 赋能,让其进一步 best !

oiyounibest 的强强联合,不只是"换个壳",而是在 命令层配置层依赖层代码层 四个层面做了系统性的减法。

1. 命令层:从记不住到不用记

如果你的某天打开项目,准备调起一条命令,突然忘记怎么编写,打开了 package.json 看到 40 多个 script 陷入了沉思 —— 那么你遇到的就是 oiyo 想解决的问题之一!

scripts.png

之前(unibest): 40 多条命令

unibest 需要为每个平台单独配了 dev 和 build 命令。

总共有 40 多行,还不算带 testproduction 尾部的那些变种。

之后(oiyo-unibest): 2 条命令

oiyo 可以交互式的选择平台,你不需要记住 -p 后面该填什么。

scripts-run-after.png

听起来是小改动,但实际使用中,你每次切平台不需要翻 scripts,不需要记参数,不纠结输错,这就是差距!

2. 配置层:从 150 行到 7 行

vite-config.png

之前(unibest): 150 行

unibest 的 vite.config.ts 挂在 20 多个插件,每个有一段独立配置。你每次打开,看到的是 UniKuRootUniLayoutsUniComponentsUniPagesAutoImportViteRestart... 组合起来 150 多行,每个插件各有一段独立配置,每个都要手动声明。

之后(oiyo-unibest): 7 行

OiyoPlugin 这 1 个插件把类型别名、路由生成、布局系统、自动导入、请求器等全部功能内置了。极简、智能、开箱即用!

基础设施由框架接管、开箱即用,使用心智大幅度下降。

3. 依赖层:由全能型依赖囊括

dev.png

之前(unibest): 80 多个依赖包

unibest 总共有 80 多个依赖包(dependencies + devDependents),这里面包括 @dcloudio/* 基础套件系列、@uni-helper/* 工程系列等。

之后(oiyo-unibest): 14 个

oiyo-unibest 的总包数压缩到了 14 个。核心依赖是 @skiyee/oiyo 这一个包就代替了上面基础套件以及工程系列。

依赖少最大的好处不是下载快,是你升级框架时只需要盯着一个包的版本号。它背后兼容了 uniapp 全系列基础套件,同时还确保运行最稳定的版本。

4. 代码层:入口、页面、分包的极简化

App.vue 中 <template> 的支持

由于普通的 UniApp 项目无法在 App.vue 这个文件中编写 <template>

所以 unibest 该功能只能由 @uni-ku/root 插件定义的 App.ku.vue 来接管,但其的本质是组件,也就是说一旦切换页面,你在 App.ku.vue 定义的变量就被恢复了,它必须配合 pinia 这种工具来使用。

而在 oiyo 中,根据 UniApp 以及 小程序 的底层设计,对 App.vue 进行兼容,让其支持:

  • 直接在 App.vue 编写 <template> 的能力
  • 定义的变量也不会因为切换页面而被恢复
  • 定义的变量、方法等支持在整个应用中进行使用

root-logo.png

了解更多请点击右边文字前往:App.vue 使用手册

分包自动识别

unibest 里新增一个分包,需要在 vite.config.ts 里手动声明一个 package 配置,每一个分包都必须这样做。

而对于 oiyo 你只需把文件放到 packages/ 目录下,其会主动识别、自动进行分包行为,无需做任何配置。当然,如果你不喜欢该定义的目录,也支持手动进行配置。

route-logo.png

了解更多请点击右边文字前往:分包使用手册

自带请求器

在 unibest 类似的项目中,你或许需要引入 axiosalova@uni-helper/uni-network 等第三方请求库。

而在 oiyo 中,你无需依赖第三方请求库,oiyo 自带的 http 模块,支持请求、上传、下载基础请求层,并且还赋予了配置派生、生命周期钩子、自动重试与请求中断能力。

了解更多请点击右边文字前往:网络请求使用手册

5. 一张对比表

维度unibestoiyo-unibest
scripts 数量40+2
vite.config 配置150+7
总依赖包80+14
核心依赖@alova/* + @dcloudio/* + @uni-helper/* 各自一个只需 @skiyee/oiyo 一个
根组件App.ku.vueApp.vue
分包配置手动声明自动识别

6. 快速使用

通过下面的命令可以快速生成项目模板:

# 如果没有 pnpm 可以通过 npm i -g pnpm 安装。
pnpm create oiyo --template=unibest

create.png

创建完成后,进入项目,安装依赖:

# 在 VS Code 中打开项目文件夹:
code <project-name>

# 安装依赖:
pnpm install

依赖安装完毕,启动项目:

# 通过交互式进行开发平台的选择
pnpm dev

# 或者通过指定模式启动
# pnpm dev h5 test   # 测试环境
# pnpm dev h5 prod   # 生产环境

🎉 oiyo-unibest 还有许多功能正在等待你探索!

7. 项目地址

根据需要进入对应「文档」站点阅读:

根据需要进入项目对应的「仓库」:

点亮 GitHub / Gitee Star,让更多人发现 oiyo-unibest,越多人使用,它就会越 best!


我是 sky [skiyee] 很高兴认识你,这是我的 github 地址:github/skiyee 欢迎前来光临!

如果觉得有帮助,记得 点赞 + 评论 + 收藏 ~