@deot/env

@deot/env 是面向 Vue/Vite 项目的统一开发环境。它提供 dec 命令、Vite 开发与构建流程、约定式页面和布局发现，以及 monorepo 中多应用与 shared 公共层的组织能力。

特性

• 使用 dec dev 和 dec build 统一单仓库与多应用 workspace 的开发、构建入口。
• 使用 dec init 创建 JavaScript 或 TypeScript 的单应用、多应用项目。
• 根据 workspace 中的 package.json 自动建立包名、目录与 Vite alias 映射。
• 自动发现 Vue 页面与布局，支持应用页面、shared 示例页和多应用路由合并。
• 缺少应用 index.html 时，根据 workspace 根部的 index.ejs 和 index.js/index.ts 生成入口。
• 构建时按应用输出独立目录，并提供 PostCSS、Autoprefixer、CSS 压缩和 iOS 12 构建目标。
• 允许通过 vite.config、ENV_OPTIONS、ENV_DEFINE 和业务环境变量扩展基础配置。

安装

pnpm add -D @deot/env

安装聚合包后会同时获得 dec CLI、开发服务和 @deot/dev 工具链。

快速开始

推荐把多个前端应用和公共层放在同一个 workspace 中：

project/
├── package.json
├── pnpm-workspace.yaml
├── vite.config.js
└── src/
    ├── index.ejs
    ├── preload.js
    ├── manage/
    │   ├── package.json
    │   ├── index.js
    │   └── pages/
    ├── mobile/
    │   ├── package.json
    │   ├── index.js
    │   └── pages/
    └── shared/
        ├── package.json
        ├── components/layouts/
        └── examples/

在根 package.json 中声明命令：

{
  "scripts": {
    "cli:dev": "dec dev --workspace src",
    "cli:build": "dec build --workspace src --out-dir dist",
    "dev": "cross-env BRANCH=dev npm run cli:dev",
    "build": "cross-env BRANCH=prod npm run cli:build"
  },
  "devDependencies": {
    "@deot/env": "^1.0.15"
  }
}

运行开发服务时可以在交互列表中选择全部应用、单个应用或 shared：

npm run dev

构建全部应用，或明确构建一个应用：

npm run build
dec build --workspace src --out-dir dist --package-name manage

完整安装与首个项目见快速开始。

包

包	版本	职责
@deot/env		聚合安装包；代码入口导出 Dever
@deot/env-cli		提供 dec dev 与 dec build
@deot/env-deps		聚合 @deot/dev 开发工具链
@deot/env-dever		解析 workspace，创建 Vite 服务与应用构建
@deot/env-shared		提供 workspace 元数据与日志工具
@deot/env-scaffold		提供 dec init 使用的项目生成器与模板
@deot/env-vue		生成 Vue、JSX、文件路由和布局插件配置

文档

• 快速开始：安装、命令、最小 workspace 与单仓库模式。
• 项目结构：多应用、shared、入口模板、页面和布局约定。
• 配置扩展：Vite 配置优先级、环境数据、alias、样式和代码检查。
• 构建与部署：独立构建、合并构建、静态资源与分环境部署。
• CLI：命令和参数。
• Dever：开发与构建运行时。
• Vue 集成：自动路由与布局目录。

Scaffold 实时预览

直接选择并运行 packages/scaffold/templates 中的模板源码：

npm run scaffold:dev

未声明的模板类型、语言和 monorepo 应用会通过 Prompt 选择，也可以完整指定：

npm run scaffold:dev -- \
	--template monorepo \
	--language ts \
	--package-name manage

同一入口还提供 scaffold:init、scaffold:build、scaffold:lint 和 scaffold:typecheck。预览直接监听模板目录，源码修改后由 Vite 实时更新；开发服务器地址以终端实际输出为准。

本仓库开发

pnpm install

# 启动文档站
npm run docs:dev

# 测试、类型检查与构建
npm run test
npm run typecheck
npm run build

# 代码检查
npm run lint

相关项目

• env-demo
• site

贡献

• 贡献指南
• License: MIT