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

我正在开发一个前端表单框架，也是为了后期做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 <[email protected]>",
  "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。

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

Monorepo

Lerna

新建项目，安装Lerna

尝试

结尾

新建项目，安装`Lerna`