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

news2024/9/20 11:01:26

一、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 node

import { 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。

得到打包的文件：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2128059.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

htop、free -h对于可用内存显示不同的区别

htop、free -h对于可用内存显示不同的区别

htop中Mem包含了缓存和缓存区， free -h查看 used free buff/cache 上面htop显示的mem， 1、我看我还能用多少内存，看哪里 看free -h 中的free 2、buff/cache 是啥 缓存缓存区占用，htop显示的效果是把这个也算在一块了&#…
阅读更多...
C# WinForm：禁用Panel容器滚动条自动移动位置的功能

C# WinForm：禁用Panel容器滚动条自动移动位置的功能

1.在WinForm项目中新建一个类： 2.类里面的内容，重写Panel的这个方法 3.编译后这个控件就出现在工具箱了 4.然后用这个新Panel控件就好了 5.完事大吉。
阅读更多...
【Python机器学习系列】建立super learner模型预测心脏疾病（案例+源码）

【Python机器学习系列】建立super learner模型预测心脏疾病（案例+源码）

这是我的第353篇原创文章。 一、引言 Super learner 是 Vander Laan et al.（2007）提出的一种基于损失函数的组合预测的学习算法。Super learner算法基于交叉验证理论，通过加权的方式组合多种候选算法，从而构造一种最小交叉验证风…
阅读更多...
Hadoop集群开启后使用jps命令查看发现没有NameNode、SecondaryNameNode、DataNode、NodeManager进程，缺少进程。

Hadoop集群开启后使用jps命令查看发现没有NameNode、SecondaryNameNode、DataNode、NodeManager进程，缺少进程。

今天安装Hadoop集群，安装完成使用jps命令查看发现没有NameNode进程，别人jps后都有6个在跑，我就两个。看到别人的 我的👉。都看懵了。。。 处理NameNode不启动的问题 检查ip地址是否是namenode所在节点的ip。 要检查 IP 地址是否是 NameNode 所在节点的 IP 地址，你可以通…
阅读更多...
大数据之Spark（二）

大数据之Spark（二）

9.4.3、RDD持久化 RDD之间进行相互迭代计算（Transformation的转换），当执行开启，新RDD的生成代表旧RDD消失。如果有的rdd需要重复使用就需要将rdd缓存，rdd.cache()或rdd.persist()。清理缓存rdd.unpersist() 缓存特点&…
阅读更多...
Python项目虚拟环境(超详细讲解)

Python项目虚拟环境(超详细讲解)

课 程 推 荐我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 ：&#x1…
阅读更多...
android 生SHH，并配置

android 生SHH，并配置

1. ssh-keygen -t rsa -b 4096 -C "XXXXxx.com" 2. vim ~/.ssh/config 新建一个文件：~/.ssh/config：并将下列的内容放入： Host * HostKeyAlgorithms ssh-rsa PubkeyAcceptedKeyTypes ssh-rsa 4.得到XXX.pub去添加ssh 5.克隆
阅读更多...
【Java】方法1_定义方法，完整格式，原理

【Java】方法1_定义方法，完整格式，原理

文章目录 前言 一、方法是什么？ 方法的完整格式 1、有返回值的函数 2、无返回值的函数 二、方法使用常见的问题三、方法在计算机中执行的原理总结 前言 学习记录方法 一、方法是什么？ 方法是一种语法结构，它可以把一段代码封装成一个功能…
阅读更多...
python绘制3d建筑

python绘制3d建筑

import matplotlib.pyplot as plt import numpy as np from mpl_toolkits.mplot3d.art3d import Poly3DCollection# 随机生成建筑块数据 def generate_building_blocks(num_blocks, grid_size100, height_range(5, 50), base_size_range(10, 30)):buildings []for _ in range(…
阅读更多...
＜＜编码＞＞第 11 章 逻辑门电路--开关电路 示例

＜＜编码＞＞第 11 章 逻辑门电路--开关电路 示例

网络电路 info::操作说明 鼠标单击开关切换开合状态 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/code-hlchs-ch11-01-network-circuit.txt 继电器开关电路 info::操作说明 鼠标单击开关切…
阅读更多...
python-游戏自动化（二）（OpenCV图像运用基础）

python-游戏自动化（二）（OpenCV图像运用基础）

OpenCV OpenCV简介 首先我们来了解一下，OpenCV是什么？ OpenCV 是计算机视觉中经典的专用库，其支持多语言、跨平台，功能强大。 OpenCV现在支持与计算 机视觉和机器学习有关的多种算法，并且正在日益扩展…
阅读更多...
基于vue框架的宠爱有佳宠物医疗管理系统4x10z（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

基于vue框架的宠爱有佳宠物医疗管理系统4x10z（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能：用户,宠物信息,医生,用户挂号,病历记录,科室信息,药物信息 开题报告内容 基于Vue框架的宠爱有佳宠物医疗管理系统开题报告 一、引言 随着现代社会生活节奏的加快，宠物已成为许多家庭不可或缺的一员。宠物不仅带来了欢乐与…
阅读更多...
海康威视相机在QTcreate上的使用教程

海康威视相机在QTcreate上的使用教程

文章目录 前言：基础夯实：效果展示：图片展示：视频展示： 参考的资料：遇到问题：问题1：int64 does not问题2：LNK2019配置思路(这个很重要)配置关键图片：配置具体过…
阅读更多...
HyperWorks二维网格划分与单元连续性

HyperWorks二维网格划分与单元连续性

自动网格划分 HyperWorks中为零件定义几何曲面是创建零件壳单元网格的最佳方式。HyperMesh 创建二维网格最有效的方法是使用 Automesh 面板直接在零件的表面创建网格。 Automesh 面板是 HyperMesh 重要的网格划分工具，通过 automesh 可实现单元尺寸、单元密度、单…
阅读更多...
TopN问题

TopN问题

100亿个integer数据，如何找到前k个最小值。 也就是问的如何排序最快 堆排序最快 完全二叉树 堆结构其实就是一颗完全二叉树 大根堆和小根堆 大根堆：每一个根节点都大于它的叶子结点 小根堆：每一个根节点都小于它的叶子结点 通过建立大根…
阅读更多...
【最新顶刊综述】【多模态学习】Vision + X：A Survey on Multimodal Learning in the Light of Data

【最新顶刊综述】【多模态学习】Vision + X：A Survey on Multimodal Learning in the Light of Data

VisionX：基于数据的多模态学习综述 论文链接 0.论文摘要和信息 摘要 摘要——我们以多感官的方式感知世界并与世界交流，不同的信息源由人脑的不同部分复杂地处理和解释，构成一个复杂但和谐统一的感知系统。为了赋予机器真正的智能&#x…
阅读更多...
核心系统用PG了，抠脑壳的权限，搞晕了！

核心系统用PG了，抠脑壳的权限，搞晕了！

作者：IT邦德 中国DBA联盟(ACDU)成员，10余年DBA工作经验， Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万 擅长主流Oracle、MySQL、PG、 高斯及Greenplum备份恢复， 安装迁移，性能优化、故障…
阅读更多...
ThinkPHP8出租屋管理系统

ThinkPHP8出租屋管理系统

有需要请加文章底部Q哦 可远程调试 ThinkPHP8出租屋管理系统 一 介绍 此出租屋管理系统基于ThinkPHP8框架开发，数据库mysql，前端Vue3，前后端不分离，系统主要角色为管理员。房租计算器，房东记账收租管理，房…
阅读更多...
使用 Prism 框架实现导航.NET 6.0 + WPF

使用 Prism 框架实现导航.NET 6.0 + WPF

动动您的手指关注下公众号，获取更多优质文章 前言 Prism 一个开源的框架，专门用于开发可扩展、模块化和可测试的企业级 XAML 应用程序，适用于 WPF（Windows Presentation Foundation）和 Xamarin Forms 等平台。 Prism…
阅读更多...
用什么软件可以把做过的试卷还原？4款软件轻松还原

用什么软件可以把做过的试卷还原？4款软件轻松还原

用什么软件可以把做过的试卷还原？在数字化教育的浪潮中，将做过的试卷还原成空白状态不仅满足了学生和教师对于重复练习和分享的需求，还极大地提升了学习效率与资源利用率。这一功能使得错题重做、模拟考试等教学活动更加便捷，促进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023