A UniApp Starter Template Shrinks 40 Scripts and 80 Dependencies Down to 2 and 14
theme: qklhk-chocolate
👋 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!
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.
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
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
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:
- The ability to write
<template>directly inApp.vue - Defined variables that are not reset when switching pages
- Defined variables, methods, etc. that can be used throughout the entire application.
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.
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
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:
- Oiyo Docs: oiyo.js.org
- Unibest Docs: unibest.tech
Visit the corresponding project "repositories" as needed:
- Github Repo: skiyee/oiyo-unibest
- Gitee Repo: skiyee/oiyo-unibest
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 ~
Top 1 of 2 from juejin.cn, machine-translated. The original thread is authoritative.
太强了
[奋斗]