跪拜 Guibai
← Back to the summary

A UniApp Starter Template Shrinks 40 Scripts and 80 Dependencies Down to 2 and 14


theme: qklhk-chocolate

og-image.png

👋 Hello friends! I'm skiyee, you can also call me sky. Today we're using oiyo to empower unibest, making it even more best!

The powerful combination of oiyo and unibest isn't just a "reskin"—it's a systematic reduction across four layers: command layer, configuration layer, dependency layer, and code layer.

1. Command Layer: From Unmemorable to Unnecessary to Remember

If one day you open a project, ready to invoke a command, and suddenly forget how to write it, you open package.json and see 40+ scripts, falling into deep thought—then you've encountered one of the problems oiyo aims to solve!

scripts.png

Before (unibest): 40+ commands

unibest required separate dev and build commands for each platform.

Over 40 lines in total, not counting variants with test and production suffixes.

After (oiyo-unibest): 2 commands

oiyo lets you interactively select the platform; you don't need to remember what to put after -p.

scripts-run-after.png

It sounds like a small change, but in actual use, every time you switch platforms you don't need to browse scripts, don't need to remember parameters, and don't struggle with typos—that's the difference!

2. Configuration Layer: From 150 Lines to 7 Lines

vite-config.png

Before (unibest): 150 lines

unibest's vite.config.ts hung over 20 plugins, each with its own separate configuration. Every time you opened it, you saw UniKuRoot, UniLayouts, UniComponents, UniPages, AutoImport, ViteRestart... combined into 150+ lines, each plugin having an independent configuration that had to be manually declared.

After (oiyo-unibest): 7 lines

The single OiyoPlugin plugin bakes in all functionality—type aliases, route generation, layout system, auto-import, request client, etc. Minimal, intelligent, and ready to use out of the box!

Infrastructure is taken over by the framework and works out of the box, drastically reducing mental overhead.

3. Dependency Layer: Encompassed by an All-in-One Dependency

dev.png

Before (unibest): 80+ dependency packages

unibest had a total of 80+ dependency packages (dependencies + devDependencies), including the @dcloudio/* base suite series, @uni-helper/* engineering series, etc.

After (oiyo-unibest): 14

oiyo-unibest compresses the total package count to 14. The core dependency is @skiyee/oiyo—this single package replaces the base suite and engineering series above.

The biggest benefit of fewer dependencies isn't faster downloads; it's that when upgrading the framework you only need to watch one package's version number. It maintains compatibility with the entire uniapp base suite behind the scenes while ensuring the most stable versions run.

4. Code Layer: Radical Simplification of Entry, Pages, and Subpackages

<template> Support in App.vue

Since a normal UniApp project cannot write <template> in the App.vue file,

unibest could only achieve this functionality through the App.ku.vue file defined by the @uni-ku/root plugin. But its essence is a component, meaning that once you switch pages, the variables you defined in App.ku.vue are reset—it must be used with tools like pinia.

In oiyo, based on the underlying design of UniApp and Mini Programs, App.vue is made compatible to support:

root-logo.png

To learn more, click the text on the right: App.vue User Manual

Automatic Subpackage Recognition

In unibest, adding a new subpackage required manually declaring a package configuration in vite.config.ts—every subpackage had to be done this way.

With oiyo, you just place the file in the packages/ directory, and it actively recognizes and automatically performs subpackage behavior without any configuration. Of course, if you don't like the defined directory, manual configuration is also supported.

route-logo.png

To learn more, click the text on the right: Subpackage User Manual

Built-in HTTP Client

In projects like unibest, you might need to introduce third-party request libraries like axios, alova, @uni-helper/uni-network.

In oiyo, you don't need third-party request libraries. oiyo's built-in http module supports basic request, upload, and download layers, and also provides configuration derivation, lifecycle hooks, automatic retry, and request cancellation capabilities.

To learn more, click the text on the right: Network Request User Manual

5. A Comparison Table

Dimension unibest oiyo-unibest
Number of scripts 40+ 2
vite.config lines 150+ 7
Total dependencies 80+ 14
Core dependencies @alova/* + @dcloudio/* + @uni-helper/* each separate Just @skiyee/oiyo one
Root component App.ku.vue App.vue
Subpackage config Manual declaration Automatic recognition

6. Quick Start

Use the following command to quickly generate a project template:

# If you don't have pnpm, install it via npm i -g pnpm.
pnpm create oiyo --template=unibest

create.png

After creation, enter the project and install dependencies:

# Open the project folder in VS Code:
code <project-name>

# Install dependencies:
pnpm install

After dependencies are installed, start the project:

# Interactively select the development platform
pnpm dev

# Or start by specifying a mode
# pnpm dev h5 test   # Test environment
# pnpm dev h5 prod   # Production environment

🎉 oiyo-unibest still has many features waiting for you to explore!

7. Project Links

Visit the corresponding "documentation" sites as needed:

Visit the corresponding project "repositories" as needed:

Light up the GitHub / Gitee Star to let more people discover oiyo-unibest. The more people use it, the more best it will become!


I'm sky [skiyee] nice to meet you. Here's my github: github/skiyee Feel free to visit!

If you found this helpful, remember to Like + Comment + Bookmark ~

Comments

Top 1 of 2 from juejin.cn, machine-translated. The original thread is authoritative.

零下18度的佳兆业 1 likes

太强了

skiyee

[奋斗]