开发表单库之前,如何初始化Monorepo仓库

我正在开发一个前端表单框架,也是为了后期做Low Code平台做准备,这个框架需要能用在ReactAngularVue等主流框架中,我选用Mitosis,只需一次开发,可以编译成多种框架代码(了解Mitosis的用法)。那么开发完后,对于不同框架,需要分别发布到npm上,也就是会有react-formangular-formvue-form等。

这里我采用lerna monorepo多包工程化管理模式。

Monorepo

传统模式multirepo,分散的仓库搜索困难,分支管理混乱,版本更新频繁,公共模块的版本一旦发生变化,需要对所有模块进行更新。 而monorepo将多个项目放到一个仓库,采用统一的规范和构建工具,版本和依赖的管理更方便,模块之间的引用调试也更方便。

Lerna

LernaBabel的开源项目,用来管理包含多个package的Javascript项目。

我上面提到的应用场景,开发多个表单库,核心交互都相同,不同的是外层壳子和一些定制功能,表单组件交互相关的模块都可以复用,我们只需要在这个仓库内不断去扩展业务需求即可,达到核心代码的复用。

新建项目,安装Lerna

首先全局安装lerna

bash 复制代码
npm install lerna -g

为这个新项目创建一个文件夹,进入文件夹里,启动lerna

bash 复制代码
lerna init

你会看到空文件夹里,多了这些

其中package.json是这样写的

里面的workspaces写的有"packages/*",意思是packages文件夹里的内容为你真正的各个项目。因此你需要新建一个packages的文件夹,里面用来保存每个独立的包模块。

我们把package.json补全像这样

json 复制代码
{
  "name": "free",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "license": "ISC",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "author": "Jenny Han <bebetterjenny@icloud.com>",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {},
  "devDependencies": {
    "lerna": "^8.1.2"
  }
}

这个项目的monorepo就已经配置好了。

尝试

我们在packages里新建一个test-package文件夹,并在里面写好package.json,这么做意味着,这里有一个名为"test-package"的包了,像下面这样

然后在根目录下运行npm install,跑完后,在根目录的node_modules里,我们会看到test-package已经被作为一个依赖加进来了:

结尾

这样一个monorepo仓库就初始化好了。后面我会将表单组件一个一个封装成npm package。

相关推荐
NocoBase2 小时前
华数传媒用 NocoBase 快速搭建 AI 多模态研发平台
人工智能·低代码·开源
xhload3d3 小时前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
踩着两条虫4 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
一个处女座的程序猿O(∩_∩)O6 小时前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端·react.js·前端框架
Hy行者勇哥7 小时前
仪表盘设计技术全解析:从前端框架到工业物联网场景的多维度选型指南
物联网·前端框架
赵大碗1 天前
Joker 智能开发平台-组件开发
低代码
歪歪1001 天前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
lapiii3581 天前
快速学完React计划(第一天)
前端·react.js·前端框架
NocoBase1 天前
11 个在 GitHub 上最受欢迎的开源无代码 AI 工具
低代码·ai·开源·github·无代码·ai agent·airtable·内部工具·app builder