培训视频

框架环境

前端框架代码 svn 地址

monorepo 为开发环境包

monorepo 技术栈

采用技术 pnpm turbo vite知识点

monorepo 是一种项目架构，简单说：一个仓库内包含多个开发项目（模块，包）。每个模块与包都可以独立打包与发布。

pnpm 同 npm 都是包管理机制，其特点 快 省

turbo 解决项目之间的依赖关系，编排构建顺序

vite 一种新型前端构建工具

monorepo 目录结构

monorepo/
  ├── apps 框架相关代码
      ├── ztgis-app 项目 demo
      ├── ztgis-core 框架核心代码
      ├── ztgis-example 框架示例代码
      └── ztgis-ui 框架的组件


├── packages 核心引用包代码
      ├── config 统一配置
      ├── tsconfig typeScript 统一配置
      ├── ArcGIS
      ├── ElementUI 组件库
      ├── kit 代码库
      ├── config 统一配置
      └── VueUse 钩子代码集合


├── workspace 工作站（项目代码在此拉取）
      ├── 项目01
      ├── 项目02
      └── 项目...


├── tests 开发包的测试环境
  ├── gis 相关代码

如何开展项目 接入业务代码

首次使用 在 目录 \monorepo> 下执行 pnpm install

1. 在 目录 workspace 建文件夹然后中拉取业务代码 从 package.json 中确认此次开发项目的名称，改名称必须是唯一的

   {
     "name": "biz01"
   }

2. 安装引用包 在目录 \monorepo> 下执行 pnpm install --filter biz01
3. 运行业务代码 pnpm dev --filter biz01
4. 或将命令行配置在全局的 package.json 文件中即可简化命令 pnpm er

{
  "scripts": {
    "er": "pnpm dev --filter biz01"
  }
}

首次使用操作流程

首次使用操作流程 更新代码后

1. 删除 apps 下的 ztgis

2. 安装pnpm : npm install -g pnpm

3. 安装引用包 pnpm i

4. 打包全部项目 pnpm build

5. pnpm dev:core (运行指定的工程)

若执行 pnpm build 时发生错误则进入错误的工程目录中执行

1. pnpm i
2. pnpm build

增加引用包

在目录 \monorepo> 下执行 pnpm install @monorepo-ui --filter biz01

注意事项：不要在 \monorepo\workspace\项目01> 业务层级的文件夹下执行 pnpm install 命令这样虽然也可以使用, 但引用包会安装在各自的业务中 node_modules 而不是全局引用，导致 node_modules 巨大，同时影响启动效率。

注意事项

1. 若项目更新后无法启动，则删除 node_modules 重新安装即可

ztgis-app 解析

项目依赖关系

{
  "devDependencies": {
    "tsconfig": "workspace:*",
    "@monorepo/element-ui": "workspace:*",
    "@monorepo/kit": "workspace:*",
    "@monorepo/ui": "workspace:*",
    "@ztgis/core": "workspace:*",
    "@ztgis/example": "workspace:*",
    "@ztgis/ui": "workspace:*"
  },


"dependencies": {
    "@element-plus/icons-vue": "^2.0.10",
    "@vue/compiler-sfc": "^3.2.45",
    "@vueuse/core": "^9.6.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^0.27.2",
    "...": "..."
  }
}

---

// 入口文件 `main.ts`
import { createApp } from 'vue'
import { reduceO } from '@monorepo/kit'
import install, { router, permissionC, viewsModules } from '@ztgis/core'
import { ui } from '@ztgis/ui'
import '@ztgis/ui/style.css'
import '@ztgis/core/dist/style.css'
import example from '@ztgis/example'


import ProcessFormView from '@/views/biz/process.vue'


const thisViewsModules = import.meta.glob('./views/**/**.vue')


reduceO((acc, k, v) => (acc[k.replace('./', '/src/views/')] = v))(
  example,
  viewsModules
)
reduceO((acc, k, v) => (acc[k.replace('./views/', '/src/views/')] = v))(
  thisViewsModules,
  viewsModules
)


import App from './App.vue'
const app = createApp(App)
app.use(install).use(ui)
permissionC(router, viewsModules)
app.use(router)
app.component('process-form-view', ProcessFormView)
app.mount('#app')

---

交流讨论 & 疑难解答