美业前端工具

开发准备

node: 14+

如何开发

开发文档：https://code.visualstudio.com/api

目录结构

mei-vscode-ext
├─ src // 插件逻辑
│  ├─ ctrl.ts // 插件全局公共功能
│  ├─ extension.ts // 插件入口
│  ├─ extensions // 插件扩展
│  │  ├─ base.ts // 基类
│  │  ├─ fast-publish // 子应用发布
│  │  ├─ jira // jira管理
│  │  ├─ project-manage // ops项目管理
│  │  ├─ unimported // 依赖分析
│  │  └─ upgrage-zent // zent升级
│  ├─ lib // 第三方库
│  │  └─ unimported // 依赖分析
│  └─ utils
│     ├─ ajax.ts
│     ├─ auth.ts // 获取各平台的登录态cookies
│     ├─ common.ts
│     ├─ getNonce.ts
│     ├─ getUri.ts
│     └─ state.ts // 插件状态管理
├─ webview // 插件使用到的webview页面（使用vite打包多页面）
│  ├─ pages // 多页面配置入口，参考其它页面即可
│  │  ├─ jira
│  │  │  ├─ index.html
│  │  │  └─ jira.ts
│  │  ├─ project-manage
│  │  │  ├─ index.html
│  │  │  └─ project-manage.ts
│  │  ├─ unimported
│  │  │  ├─ index.html
│  │  │  └─ unimported.ts
│  │  └─ upgrage-zent
│  │     ├─ index.html
│  │     └─ upgrage-zent.ts
│  ├─ public
│  │  └─ favicon.ico
│  ├─ shims.d.ts
│  ├─ src
│  │  ├─ App.vue
│  │  ├─ main.ts
│  │  ├─ pages
│  │  │  ├─ jira
│  │  │  │  └─ App.vue
│  │  │  ├─ project-manage
│  │  │  │  └─ App.vue
│  │  │  ├─ unimported
│  │  │  │  └─ App.vue
│  │  │  └─ upgrage-zent
│  │  │     ├─ App.vue
│  │  │     └─ index.css
│  │  └─ utilities
│  │     └─ vscode.ts
│  └─ yarn.lock
└─ yarn.lock

新增一个插件子功能需要做些什么

在package.json的contributes里注册对应的命令或左侧菜单
在src/extensions里添加一个目录，作为子功能的开发入口
在src/extension.ts里注册子功能

开发一个插件的webview需要做些什么

在webview/pages目录下增加一个目录作为页面入口
在webview/src/pages目录下增加一个目录作为页面内容
在webview/vite.config.ts里的input增加页面打包入口
在webview/src/App.vue添加新增的页面路由跳转，方便调试页面

webview页面基于vue3+element-plus 如果引用新的第三方包需要在vite.config.ts里的manualChunks添加包路径，打包需要将公共js打包在一起

ps：webview调试过程一般分为ui开发和功能调试，因为在vscode插件调试时无法使用热更新的方式打开webview，所以先在浏览器端调试页面后再到vscode中调试功能

如何开启调试

f5开启调试，有弹窗警告可以忽略，会自动运行npm run watch 命令

打包

npm run build-vsix

美业子应用发布工具

使用方式点击下方的发布子应用按钮或通过shift + command+p输入命令发布子应用唤起工具

勾选需要变更的信息，注意是需要变更的才勾选上。
回车或点击ok，按提示输入对应变更的信息即可

首次使用时会唤起cas登录页面，正常扫码登录即可

项目依赖分析

插件通过unimported进行依赖分析，默认使用的配置信息是

{
   "entry": [ "./src/main.js" ],
   "extensions": [".ts", ".js", ".tsx", ".jsx"],
   "aliases": {
        "shared/*": ["./shared/*"],
        "assets": ["./shared/assets"],
        "images/*": ["./shared/assets/images/*"],
        "api/*": ["./shared/api/*"],
        "cpn/*": ["./src/components/*"],
        "util/*": ["./shared/utils/*"],
        "auth": ["./shared/auth"],
        "img/*": ["./shared/assets/images/*"],
        "types/*": ["./typings/*"],
        "src/*": ["./src/*"]
    },
    "rootDir": "./"
}

如果需要自定义配置，可以在项目根目录添加.unimportedrc.json

插件会将无被使用的文件列表列出，可以进行批量删除

zent7升级zent(9/10)工具

插件会自动扫描项目中携带['router/index', 'routers', 'routers/index']的文件名作为路由入口，并列出路由列表。选择对应路由会列出该路由下[可升级文件、需手动升级文件、已完成升级文件] 提供一键升级功能（部分组件需要手动升级）升级工具建议用户以路由的维度升级，升级一个路由后进行测试完成后继续下一个路由升级

ops项目管理

插件会列出ops中的项目、日常列表。提供关联应用能力

依赖包link

该功能仅为了对有赞二方包开发过程快速link，减少npm link和npm unlink的过程使用方式：

选中需要link的依赖，点击link选取软链的目标文件夹，插件会在node_modules下的依赖目录下创建一个依赖名-temp的文件夹临时存放原依赖
需要重新执行项目的开发命令如npm run dev后生效
开发结束后点击unlink按钮移除软链
需要重新执行项目的开发命令如npm run dev后生效

开发模式和npm link一致

syl