我正在开发一个前端表单框架,也是为了后期做Low Code平台做准备,这个框架需要能用在React
,Angular
,Vue
等主流框架中,我选用Mitosis
,只需一次开发,可以编译成多种框架代码(了解Mitosis的用法)。那么开发完后,对于不同框架,需要分别发布到npm
上,也就是会有react-form
,angular-form
,vue-form
等。
这里我采用lerna monorepo
多包工程化管理模式。
Monorepo
传统模式multirepo
,分散的仓库搜索困难,分支管理混乱,版本更新频繁,公共模块的版本一旦发生变化,需要对所有模块进行更新。 而monorepo
将多个项目放到一个仓库,采用统一的规范和构建工具,版本和依赖的管理更方便,模块之间的引用调试也更方便。
Lerna
Lerna
是Babel
的开源项目,用来管理包含多个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。