如何模拟一个小程序项目打包的流程

一、Uni-app 执行 yarn run dev:mp-weixin后会发生什么

（一）准备工作

1. 克隆项目：创建以 typescript 开发的工程（如命令行创建失败，请直接访问 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip 下载模板）。
   • npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
2. 执行 dev:mp-weixin这个命令时，yarn或npm会运行package.json文件中定义的scripts部分的对应命令。通常会类似于这样定义：

   "scripts": {"dev:mp-weixin": "uni -p mp-weixin" 
   }
   

（二）执行后发生的事情

1. 编译项目：uni -p mp-weixin命令会调用 uni-app 的 CLI 工具，编译你的项目代码。uni-app 会将你的 Vue.js 代码转换为微信小程序可以识别的代码，包括将 .vue文件编译成微信小程序的wxml、wxss、js和json文件。
2. 生成微信小程序项目文件：编译完成后，uni-app 会在项目的dist目录下生成一个专门为微信小程序准备的项目文件夹。这个文件夹包含了所有编译好的代码和资源文件，可以直接在微信开发者工具中打开并运行。
3. 监视文件变化（开发模式）：如果命令是针对开发环境的（如dev:mp-weixin），uni-app CLI 通常会启动一个开发服务器，并持续监视项目文件的变化。当你修改项目中的文件时，它会自动重新编译，并更新到dist目录中的微信小程序项目文件夹中。
4. 启动开发服务器：在某些情况下，uni-app 还可能会启动一个本地开发服务器，方便在浏览器中实时预览应用的 H5 版本，并且可以同步调试。

二、实现类似 uni 插件的 vite 插件

（一）创建命令行工具

1. 在项目中创建一个可以在命令行执行的工具，通常可以通过在package.json中定义一个脚本来实现。可以使用 Node.js 创建一个 CLI 工具，并通过配置package.json来实现全局或本地运行。在package.json中定义vue-mini作为一个可执行命令，并且将bin/vue-mini.js文件链接到该命令。

   {"name": "vue-mini-plugin","version": "1.0.0","main": "index.js","license": "MIT","bin": {"vue-mini": "./bin/vue-mini.js"},"scripts": {"vue-mini": "vue-mini"},"dependence": {},"dependencies": {}
   }
   

（二）项目结构

（三）编写vue-mini.js

在bin目录下创建vue-mini.js文件，这个文件会作为 CLI 工具的入口文件。

#!/usr/bin/env nodeimport { spawn } from "child_process";
import { resolve, dirname } from "path";
import { fileURLToPath } from "url";// 获取当前文件的路径
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);// 获取 mode 参数
const mode = process.argv.includes("--mode")? process.argv[process.argv.indexOf("--mode") + 1]: "development";
console.log(`mode: ${mode}`);// 运行不同的脚本
if (mode === "development") {const devScript = resolve(__dirname, "../scripts/development.js");const childProcess = spawn("node", [devScript], {stdio: "inherit",cwd: __dirname,shell: false,});childProcess.on("exit", (code, signal) => {if (code!== 0) {console.error(`服务启动失败，退出码: ${code}`);} else {console.log(`服务正常退出`);}});
} else {console.error("无效的模式参数");
}

（四）编写development.js

在scripts目录下创建development.js文件，这个文件将负责实际的开发模式下的构建和启动过程。

import { spawn } from "child_process";
import { resolve, dirname } from "path";
import { fileURLToPath } from "url";const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);const serveScript = resolve(__dirname, "../serve.js");const childProcess = spawn("node", [serveScript], {stdio: "inherit",cwd: __dirname,shell: false,
});childProcess.on("exit", (code, signal) => {if (code!== 0) {console.error(`服务启动失败，退出码: ${code}`);} else {console.log(`服务正常退出`);}
});

（五）编写build.js

import express from "express";
import { dirname } from "path";
import { fileURLToPath } from "url";
import { mkdir, readFileSync, rm, writeFileSync } from "fs";
import { transform } from "esbuild";
import { parse } from "@vue/compiler-sfc";const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);const app = express();const port = 3000;if (process.argv.includes("--clean")) {rm(__dirname + "/dist", { recursive: true }, (err) => {if (err) console.log(err);});
}mkdir(__dirname + "/dist/index", { recursive: true }, (err) => {if (err) console.log(err);
});app.get("/", (req, res) => {res.sendFile(__dirname + "/src/index.html");
});app.get("/*.js", (req, res) => {const path = req.path;const file = readFileSync(__dirname + "/src" + path, "utf-8");writeFileSync(__dirname + "/dist/index.js", file);
});app.get("/*.css", (req, res) => {const path = req.path;const file = readFileSync(__dirname + "/src" + path, "utf-8");writeFileSync(__dirname + "/dist/index.css", file);
});app.get("/*.ts", async (req, res) => {const path = req.path;const file = readFileSync(__dirname + "/src" + path, "utf-8");const transformResult = await transform(file, {loader: "ts",format: "esm",target: "es6",});writeFileSync(__dirname + "/dist/index.js", transformResult.code);
});app.get("/*.vue", (req, res) => {const path = req.path;const fileContent = readFileSync(__dirname + "/src" + path, "utf-8");const parsed = parse(fileContent);if (parsed.descriptor.template) {writeFileSync(__dirname + "/dist/index/index.wxml",parsed.descriptor.template.content);}if (parsed.descriptor.scriptSetup) {writeFileSync(__dirname + "/dist/index/index.js",parsed.descriptor.scriptSetup.content);}if (parsed.descriptor.styles[0].content) {writeFileSync(__dirname + "/dist/index/index.wxss",parsed.descriptor.styles[0].content);}writeFileSync(__dirname + "/dist/index/index.json", "");const projectJson = readFileSync(__dirname + "/src/project.config.json","utf-8");writeFileSync(__dirname + "/dist/project.config.json", projectJson);
});app.listen(port, () => {console.log(`http://localhost:${port}`);
});

（六）安装和测试

在项目根目录下运行以下命令，确保你的 CLI 工具可以运行：

1. yarn
2. yarn link

这将创建一个全局链接，允许你直接使用vue-mini命令。现在你可以测试运行以下命令：vue-mini --mode development。

得到打包的文件：