基于 monorepo 的架构实践总结： vscode 插件及其相关 packages 开发

前言

GithubBlog：https://github.com/Nealyang/PersonalBlog/issues/99

背景如是：

• pmlci 源码脚手架：https://mp.weixin.qq.com/s/JRF4GjYqXw1f6jGqcYofnQ

随着脚手架的提供，以及新增页面和模块的功能封装。

毕竟 「多提供一层规范，就多了一层约束。」 而架构的本质是为了让开发者能够将精力更加的focus 到业务的开发中，无需关心其他。比如上述脚手架初始化出来的一些模块配置、异步加载甚至一些已定义并且保留在初始化架构中的一些业务 hooks 等。

如上原因，我希望能够提供一套可视化的操作（创建项目、选择依赖、添加页面，选择所需物料、配置物料属性等），一言以蔽之就是让用户对于源码开发而言，只需要编写对应的业务模块组件，而不需管理架构是如何组织模块和状态分发的，「除了业务模块编码，其他都是可视化操作」。

因为团队里 100%的同学都是以 vscode 作为饭碗，所以自然而然的 vscode extinction 就是我的第一选择了。计划中会提供创建项目、新增页面、模块配置、页面配置、新增模块等一系列插件。后续阶段性进展，再发文总结。咳咳，是的，这将是一个「源码工作台」的赶脚~

截止目前，已经将项目的脚手架基本搭建了个 90% ，此处作为第一阶段性总结。

成果展示

demo

项目目录

extensions 文件夹为 vscode 插件的文件夹、packages 文件夹是存放公共的组件、scripts 为发布、构建、开发的脚本，其他就是一些工程配置。

❝

当然，这里最主要不是产品功能的展示，嘎嘎~

❞

packages.json scripts

  "scripts": {
    "publish": "lerna list && publish:package",
    "publish-beta": "lerna list && npm run publish-beta:package",
    "start":"tnpm run start:packages && tnpm run start:extensions",
    "start:packages": "tnpm run setup:packages && tnpm run packages:watch",
    "start:extensions":"tnpm run extensions:link",
    "commit": "git-cz",
    "env": "node ./scripts/env.js",
    "packages:link": "lerna link",
    "packages:install": "rm -rf node_modules && rm -rf ./packages/*/node_modules && rm -rf ./packages/*/package-lock.json && SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ yarn install --registry=http://registry.npm.taobao.org",
    "packages:clean": "rm -rf ./packages/*/lib",
    "packages:watch": "ts-node ./scripts/watch.ts",
    "packages:build": "npm run packages:clean && ts-node ./scripts/build.ts",
    "setup:packages": "npm run packages:install && lerna clean --yes && npm run packages:build && npm run packages:link ",
    "publish-beta:package": "ts-node ./scripts/publish-beta-package.ts",
    "publish:package": "ts-node ./scripts/publish-package.ts",
    "extensions:install": " rm -rf ./extensions/*/node_modules && rm -rf ./extensions/*/package-lock.json && rm -rf ./extensions/*/web/node_modules && rm -rf ./extensions/*/web/package-lock.json && ts-node ./scripts/extension-deps-install.ts",
    "extensions:link": "ts-node ./scripts/extension-link-package.ts"
  }

scripts 没有添加完全，目前开发直接 npm start 发布 packages 分别为 npm run publish-beta:package 、 npm run publish:package ,上面也有 publish 的命令汇总。

架构选型

目前是为了将 pmCli 功能全部封装成插件，然后通过可视化替代掉编码过程中关于架构配置的相关操作。所以插件必然不会只有一个，而是一个基于源码架构的一个「操作集」：多 extensions。插件中有非常多的相似功能封装。比如从 gitlab 上读取基础文件、vscode 和 WebView 的通信、AST 的基本封装等，所以必然需要依赖非常多的 packages ，为了开发提效和集合的统一管理，必然想到基于 lerna 的monorepo 的项目结构。

其中关于 lerna 的一些采坑就不多说了，主要是我也只是看了市面上大部分的实践文章和官方文档，缺乏一些自己实践（毕竟感觉研究多也解决不了多大的痛点，就不想花精力了）最终的 monorepo 是基于 yarn workspace 实现的，通过 lerna link 来软链package、lerna 的发布 package 比较鸡肋，就参考 App works 自己写了一些打包发布到预发、线上的脚本。

项目工作流以及编码约束通过husky、lint-staged、git-cz、 eslint、prettier等常规配置。

编码采用 ts 编码，所以对于 extensions 以及 packages 中都有很多公共的配置，这里可以提取出来公共部分放置到项目根目录下（如上项目目录截图）。

实践

通过 lerna init、lerna create xxx 来初始化这里就不说了。反正完事以后就是带有一个packages 和 package.json 文件的一个目录结构。

项目架构

项目结构

package结构

package

❝

以上结构说明都在图片里了

❞

脚本封装

在项目的根目录下放置了一个 scripts 文件夹，存放着一些发布、开发以及依赖的安装的脚本啥的。

scripts

getPakcageInfo.ts

❝

用于从 packages 中获取相关 publish 信息。其中shouldPublish是将本地 version 和线上 version 对比，判断师傅需要执行 publish 的

❞

/*
 * @Author: 一凨
 * @Date: 2021-06-07 18:47:32
 * @Last Modified by: 一凨
 * @Last Modified time: 2021-06-07 19:12:28
 */
import { existsSync, readdirSync, readFileSync } from 'fs';
import { join } from 'path';
import { getLatestVersion } from 'ice-npm-utils';

const TARGET_DIRECTORY = join(__dirname, '../../packages');
// 定义需要获取到的信息结构
export interface IPackageInfo {
  name: string;
  directory: string;
  localVersion: string;
  mainFile: string; // package.json main file
  shouldPublish: boolean;
}
// 检查 package 是否 build 成功
function checkBuildSuccess(directory: