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

·  阅读 4217

前言

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

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

.
├── package.json
└── packages
    ├── projectA
    ├── projectB
    └── projectC
复制代码

MonoRepo与MultiRepo

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

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

MonoRepo

✅ 优点

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

❌ 缺点

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

MultiRepo

✅ 优点

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

❌ 缺点

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

使用工具

lerna

Lerna 是一个管理工具,用于管理包含多个软件包(package)的 JavaScript 项目。可以为monorepo项目提供依赖抽取,npm发布等功能,以优化使用git和npm的monorepo项目的工作流程

项目结构

.
├── 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
  }
};
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改