使用Monorepo管理前端微前端项目

前言

首先回答一个问题，什么是monorepo？monorepo是一种组织管理代码的方式，与之相对的是multirepo。monorepo是指在一个git仓库中管理多个项目。许多开源仓库都采用了这种方式来组织管理项目，比如create-react-app，vue等。与之相对的multirepo则是按照模块将代码分布在不同的仓库管理

monorepo一般具有如下的项目结构

.
├── package.json
└── packages
    ├── projectA
    ├── projectB
    └── projectC

MonoRepo与MultiRepo

两者的核心区别是在于你相信什么样的代码结构可以让你的团队拥有最高的效率。

可以从两者的优缺点来看看那种代码组织结构是适合你的项目的。

MonoRepo

✅ 优点

• 代码具有更高的可维护性
• 可以抽取公共进行代码复用
• 可以进行公共依赖的抽取，降低空间占用和开发成本
• 可以使用统一的工程配置

❌ 缺点

• 大型项目对版本控制是严峻考验
• 打包构建需要专门优化，否则会出现打包时间过长
• 权限管理较为困难

MultiRepo

✅ 优点

• 按照模块划分，每个模块体积较为合理
• 权限管理较易于实现

❌ 缺点

• 跨多项目开发较为繁琐
• 依赖存在重复安装
• 存在大量重复代码
• 权限管理较为容易便捷

微前端与MonoRepo

从阿里的qiankun对微前端的介绍，我们可以了解到微前端有以下几个核心特性

• 技术栈无关
• 独立开发、独立部署
• 独立运行时

我们使用monorepo模式可以很好的对微前端进行进行统一管理。

使用工具

lerna

Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。

yarn

一个npm包管理工具，支持workspace

项目结构

.
├── README.md
├── lerna.json
├── package.json
├── packages
│   ├── project-test1
│   ├── project-test2
│   ├── project-test3
├── scripts
│   ├── build-qcd.sh
│   └── build.sh
└── yarn.lock

配置文件

lerna.json

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

package.json

{
  "name": "micro-monorepo",
  "version": "1.0.0",
  "private": true,
  "description": "monorepo project",
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  "workspaces": [
    "packages/*"
  ]
}

打包构建

这里的实现方式是通过分支名来识别每次push代码需要打包的模块，比如说我们正在开发project-test1，我们的分支名就应当是project-test1/your-branch-name这样结构的。

之后我们再通过gilab-ci来实现push代码后自动打包

遇到的小坑

当我们使用workspace将依赖提升至顶级目录后，使用相对路径的一些依赖会出现问题，我们需要在webpack配置文件中的对loderOption进行路径进行重新设置

以vue项目中的postcss举例子

const path = require('path');

const config = {
  assetsDir,
  css: {
    extract: {
      filename: `${assetsDir}/css/[name].css`,
      chunkFilename: `${assetsDir}/css/[name].css`
    },
    // 重新指定路径
    loaderOptions: {
      postcss: {
        config: {
          path: path.join(__dirname, '.postcssrc.js')
        }
      }
    }
  },
  filenameHashing: false,
  devServer: {
    hot: true,
    disableHostCheck: true
  }
};