# mirage_box

**Repository Path**: limeng32/mirage_box

## Basic Information

- **Project Name**: mirage_box
- **Description**: 一个将 react 单页应用打包为 vscode 插件的解决方案
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-02-24
- **Last Updated**: 2025-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mirage

项目介绍请见 [mirage-doc](https://mirage-box.github.io/)，国内代码托管网站请见 [https://gitee.com/limeng32/mirage_box](https://gitee.com/limeng32/mirage_box)，我们为开发最好的 vscode 插件而努力。

mirage 是一个将 react 单页应用打包为 vscode 插件的工具，它基于 monorepo 方式管理，通过"约定-配置"和"patch-package"的方式，将开发高价值插件应用这个复杂的工作变得无比简单，希望它对您能有所帮助。

#### mirage 主要用途：

您可以通过在 vscode 插件市场中下载 `mirage-lowcode` 来了解它的用途，它的截图如下所示：

![](./resource/lowcode.png "mirage-lowcode")

这个插件原本都是 react 单页应用，通过 mirage 打包成为插件后，可以更方便的下载、更新、与其它插件联动，使得开发能效急剧提升。其它可下载插件还有 `mirage-swagger` 和 `mirage-flow`。当您熟练掌握了 mirage 的使用后，您也能将自己常用的单页应用打包成插件，构建出自己的 mirage studio，并且，您也会愿意分享自己的心得。

#### mirage 快速上手指南：

本项目的 `feature/test`、`feature/lowcode`、`feature/swagger`、`feature/flow` 分别对应了一个插件，打包方法为：

- 拉取指定分支代码
- 进入 /toolkit 文件夹，执行 `npm install --force` 安装依赖
- 还是 /toolkit 文件夹，执行 `npm run webpack`，成功的话在项目根目录下会出现 /workshop 文件夹
- 进入 /workshop 文件夹，执行 `npm install --force`，安装依赖
- 还是 /workshop 文件夹，执行 `npm run webpack-dev`，成功的话可以在 vscode 调试模式中看到插件（右下角如有报错可忽略）。调试无误后执行 `vsce package`，可以将插件打包为 vsix 文件

#### mirage 项目结构：

mirage 基于 monorepo 方式管理，所有相关内容都在同一仓库中的不同分支中，各分支含义如下：

- `master` 放置开源协议和 README 文件，无具体开发内容
- `main` 放置打包原始框架，打包新插件前应该从这里拉取新的分支
- `hexo` 放置 mirage 说明文档的源码
- `feature/lowcode` 放置打包 mirage-lowcode 插件的代码
- `feature/swagger` 放置打包 mirage-swagger 插件的代码
- `feature/flow` 放置打包 mirage-flow 插件的代码
- `feature/test` 放置用来做打包练习的 mirage-test 插件的代码

我们通过 tag 来管理各分支的版本，tag 的定义方式为 "分支名"-"版本号"，例如 tag `main-0.0.1` 表示其固定了 "main" 分支的 0.0.1 版本；

更多内容请您参见软件文档 [mirage-doc](https://mirage-box.github.io/)，您可以通过 Issues 与我们联系，提出您的需要，或是加入我们成为贡献者，提交您的代码，我们非常欢迎您这样做。