开发体验升级：环境变量注入与可视化构建工具开发体验升级：环境变量注入与可视化构建工具在处理几十个甚至上百个租户的小程序

开发体验升级：环境变量注入与可视化构建工具

在处理几十个甚至上百个租户的小程序开发时，如果依然沿用传统的命令行输入方式（如 npm run dev:wx0159...），不仅效率低下，还极易输错 AppID 导致环境混乱。

为了彻底解决这一痛点，本项目构建了一套全链路的开发体验优化方案，包含自动化的环境变量注入和所见即所得的可视化构建工具。

一、环境变量：全链路自动注入

传统的 Uniapp 开发往往需要在代码中手动修改 baseUrl 或通过 .env 文件管理变量，但在多租户场景下，这种方式维护成本极高。

1. 痛点分析

手动切换易错：每次发版前要手动改接口地址，一旦忘记就是生产事故。
敏感信息泄露：AppSecret 等敏感信息不应硬编码在前端代码中。
多环境管理混乱：测试环境、预发环境、生产环境的配置混杂在一起。

2. 解决方案：构建时动态注入

我们采用 Build Script -> Process Env -> Vite Define -> Client Code 的全链路注入机制。

步骤一：脚本注入

在构建脚本启动时，先读取租户配置文件，将其中的 env 对象挂载到 Node.js 的 process.env 上。

// scripts/build/index.js (伪代码)
const config = require('./setting/wx/wx0159.js');
process.env.UNI_PLATFORM = config.env.UNI_PLATFORM;
process.env.MCODE = config.env.MCODE;

步骤二：Vite 透传

利用 Vite 的 define 选项，将 Node.js 端的环境变量注入到前端代码的编译时常量中。

// vite.config.ts
import getDefineEnv from './scripts/choreJS/defineEnv.js';

export default defineConfig(() => {
  return {
    // getDefineEnv 会自动提取 process.env 中的关键变量
    define: getDefineEnv() 
  };
});

步骤三：前端使用

在业务代码中，开发者像使用本地变量一样直接访问 process.env.MCODE，而这些变量在打包后会被替换为具体的字符串常量。

// src/utils/env.ts
export const getConfig = () => ({
  // 编译后变成: m_code: "dwr1Op9C3C5q...",
  m_code: process.env.MCODE 
});

二、可视化构建工具：告别枯燥的命令行

面对长得像乱码一样的租户 ID（如 wxb5577918********），要求开发者每次都准确输入简直是反人类的。因此，我们开发了两套辅助工具。

1. 命令行交互式选择器 (CLI Selector)

对于习惯使用终端的开发者，我们提供了基于 inquirer 的交互式菜单。

入口：npm run console
功能：自动扫描 scripts/setting/ 下的所有配置文件，生成可选择的列表。支持模糊搜索、上下键选择。
实现：scripts/console-selector.js

// 核心逻辑：扫描文件 -> 生成选项 -> 执行命令
const settingFiles = listSettingFiles(); // 扫描 scripts/setting
const choices = settingFiles.map(file => ({ name: file, value: file }));

inquirer.prompt([...]).then(answers => {
  // 自动拼接并执行命令: node scripts/build/index.js ...
  executeCommand(answers.selectedOption); 
});

2. Web 可视化构建服务 (Web GUI)

对于不仅需要打包，还需要实时查看构建日志、停止/重启任务的场景，我们开发了一个基于 Node.js 的本地 Web 服务。

入口：npm run server (默认端口 3003)
架构：
- 后端：scripts/server.js 使用原生 Node.js http 模块搭建，零依赖。
- 前端：scripts/build-interface.html 提供简洁的 UI 界面。
核心功能：
- 一键打包：点击网页按钮即可触发 dev 或 build。
- 日志流式回显：通过 HTTP Chunked Transfer Encoding，将构建进程的 stdout 实时推送到前端展示。
- 进程管理：支持优雅地终止（Kill）正在运行的构建进程，这在 Windows 下尤为重要（解决了端口占用和僵尸进程问题）。

流式日志实现片段 (server.js):

// 设置响应头为流式传输
res.writeHead(200, {
  'Content-Type': 'text/plain; charset=utf-8',
  'Transfer-Encoding': 'chunked'
});

// 监听子进程输出并实时写入响应流
buildProcess.stdout.on('data', data => {
  res.write(data);
});

三、总结

通过这一套组合拳：

环境变量自动注入：保证了代码的纯净与安全，杜绝了手动修改配置带来的风险。
可视化构建工具：极大地降低了多租户开发的门槛，新成员无需记忆任何复杂的命令和 ID，开箱即用。

这不仅提升了开发效率，更是工程化思维在提升开发者体验（DX）方面的最佳实践。

开发体验升级：环境变量注入与可视化构建工具