首页 > 其他分享 >Monorepo大作战:带你一条龙上手,0基础到完全用起来!

Monorepo大作战:带你一条龙上手,0基础到完全用起来!

时间:2024-09-19 21:52:01浏览次数:3  
标签:monorepo 作战 js json app1 shared 一条龙 packages Monorepo

一句话文学:

说清楚:一个正常完整的,创建monorepo项目的步骤

代码王国图


创建一个完整的 monorepo 服务 涉及多个步骤,从代码仓库的设置、包管理工具的配置,到打包和部署流程。以下是完整的步骤说明,每一步都有详细解释,包括主流程及拓展部分。

1. 设置代码仓库结构

首先,创建一个代码仓库,并定义 monorepo 的基本结构。

1.1 初始化 Git 仓库

mkdir my-monorepo
cd my-monorepo
git init

1.2 设置基础文件

在根目录下创建 package.json.gitignore 文件。

package.json 示例:

{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

.gitignore 示例:

node_modules
dist

1.3 创建 packages 文件夹

packages 文件夹下存放各个项目或包:

mkdir packages

2. 安装和配置 Lerna + Yarn Workspaces

2.1 安装依赖

yarn init -y
yarn add lerna -D

2.2 初始化 Lerna

npx lerna init

这会生成一个 lerna.json 文件,添加以下内容来配置 Lerna:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent"
}

3. 创建项目/包

packages 目录下创建不同的项目或模块。

3.1 创建 app1 项目

mkdir -p packages/app1
cd packages/app1
yarn init -y

app1package.json 中添加依赖,例如:

{
  "name": "app1",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "build": "echo 'Building app1'",
    "start": "node src/index.js"
  }
}

src/index.js 中,编写简单的服务逻辑:

console.log("App1 is running");

3.2 创建 shared-lib

packages 目录下创建一个共享库:

mkdir -p packages/shared-lib
cd packages/shared-lib
yarn init -y

shared-libpackage.json 中:

{
  "name": "shared-lib",
  "version": "1.0.0",
  "main": "src/utils.js",
  "scripts": {
    "build": "echo 'Building shared-lib'"
  }
}

src/utils.js 中,编写共享库的功能:

module.exports = {
  utilFunction: () => 'Shared utility function'
};

4. 包间依赖

app1 中引用 shared-lib

4.1 在 app1package.json 中添加依赖:

{
  "dependencies": {
    "shared-lib": "*"
  }
}

4.2 在 app1 的代码中使用:

const { utilFunction } = require('shared-lib');
console.log(utilFunction());

4.3 安装所有依赖

yarn install

Yarn 会自动安装并链接所有项目包。

5. 打包流程

5.1 配置打包脚本

为每个项目定义打包脚本。在 app1package.json 中:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

shared-lib 中也定义类似的 build 脚本。

5.2 Webpack 配置(以 app1 为例)

app1 中创建 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production'
};

5.3 构建

使用 Lerna 的并行构建功能来一次性构建所有包:

npx lerna run build

6. 部署流程

6.1 Docker 部署(可选)

可以为每个服务打包成 Docker 镜像。

app1 中编写 Dockerfile

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["node", "src/index.js"]

构建 Docker 镜像:

docker build -t app1 .

运行容器:

docker run -p 3000:3000 app1

6.2 CI/CD 配置(以 GitHub Actions 为例)

创建 .github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Install dependencies
      run: yarn install

    - name: Build packages
      run: npx lerna run build

    - name: Deploy (optional)
      run: echo "Deploying..."

7. 代码版本控制

Lerna 提供了独立版本管理的功能,可以单独为每个包发布新版本。

7.1 使用 Lerna 发布新版本

npx lerna version

Lerna 会根据包的变化自动生成版本号。

8. 拓展部分

8.1 增加 TypeScript 支持

如果需要 TypeScript 支持,可以在每个包中添加 tsconfig.json 并配置 typescript 相关依赖。

yarn add typescript -D

配置 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es6"
  }
}

8.2 ESLint 和 Prettier 代码风格管理

可以为整个 monorepo 项目添加 ESLint 和 Prettier。

yarn add eslint prettier -D

配置 .eslintrc.js.prettierrc 文件来统一代码风格。

8.3 Storybook 支持

如果在项目中使用前端 UI 组件库,可以通过在 monorepo 中配置 Storybook 来展示和调试组件。

8.4 测试管理

使用 Jest 或 Mocha 等测试框架来统一管理 monorepo 中的测试用例。

8.5 项目发布

可以通过 npm 或私有 registry(如 Nexus 或 Verdaccio)发布包。在每个包的 package.json 中配置发布信息,并通过 Lerna 实现统一发布:

npx lerna publish

总结

通过这些步骤,您可以从零搭建一个完整的 monorepo 服务,从代码仓库管理、依赖配置、项目间共享代码、到打包和部署。使用 Lerna 和 Yarn Workspaces 这样的工具可以极大简化 monorepo 的管理,同时扩展性强,支持多种工具和流程的集成。

标签:monorepo,作战,js,json,app1,shared,一条龙,packages,Monorepo
From: https://blog.csdn.net/qq_14811655/article/details/142370828

相关文章

  • Monorepo:一仓统天下,揭秘现代开发的高效代码管理模式
    一句话文学:说清楚2个问题:1.什么是monorepo.2.monorepo都有哪几种代码结构模式很久以前,在一个名叫代码王国的地方,程序员们都在自己的小屋里忙着写代码。他们各自拥有自己的工具箱(代码库),但每次要分享工具或者联合工作时,就得穿过迷宫般的文件夹,传递代码包裹,甚至为了保证......
  • Canvas简历编辑器-Monorepo+Rspack工程实践
    Canvas简历编辑器-Monorepo+Rspack工程实践在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDesign、ResizeObserve、Jest 等包之外,关于数据结......
  • 使用pnpm、monorepo 来构建 vue + 独立组件库项目
    新建项目使用pnpm进行安装pnpmcreatevue@latest在根目录下创建pnpm-workerspace.yaml文件packages:-'components/**'此处,components为根目录中的components文件夹,他是独立于我们项目的一个组件库,不包含在src内,此时目录结构如下:root-components-node_modules......
  • VOC-YOLO数据集转换,一条龙服务,包含数据增强
    VOC-YOLO数据集转换,一条龙服务,包含数据增强文章目录前言一、VOC转YOLO二、YOLO数据增强1.需要什么增强就保留,不需要就注释三、划分YOLO数据集总结前言VOC-YOLO数据集转换有步骤好上手,跟随脚步修改路径即可一、VOC转YOLOimportxml.etree.ElementTreeasETim......
  • 2025计算机毕设最全个人站点!(选题、开发、部署、讲解 一条龙)
    目录前言我的优势我的个人网站与我合作前言❤️博主简介:全网累计客户1000+,培训机构讲师、全栈开发工程师、知乎/小红书优秀作者、腾讯云/阿里云VIP客户、专注Java、小程序、安卓领域和毕业项目开发❤️服务:本毕设工作室提供无偿选题服务!包括Java、Python、微信小程序......
  • 球球大作战
    代码: #define_CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdbool.h>#include<graphics.h>#include<stdlib.h>#include<conio.h>#include<time.h>//随机数库文件#include<math.h>#include<tchar.h>/*注重的是思路思路......
  • Keil最新版本一条龙ARM+C51安装教程 STM32/51开发环境配置 (附下载地址)
    文件下载需要准备的文件有:下载地址:KEIL-C51:C51KEIL-ARM:MDK-ARMSTC-ISP:STCISP下载软件ARMCompilerVersion5:Compiler安装ARM双击打开下一步,更改安装目录,(如需安装在其他位置)红圈位置请手动输入,并保持前面内容与上一行(Core)一致空格即可,并点击下一步......
  • Stable Diffusion进阶篇,ComfyUI文字生成视频的一条龙服务(附完整工作流)
    有些小伙伴发现了一个问题,那就是根据图片生成出来的视频看着怪怪的:前半段看着好像还可以,但是后面部分的面部就开始崩坏了。而今天这篇笔记则是要简单了解一下一些进阶参数以及一些文生图生视频的内容,不然的话我担心内容太少字数都凑不够。我这里准备了ComfyUI文字生成......
  • Linux性能调优大作战:从零到英雄,手把手教你打造极速系统!让你的服务器快如闪电!
    第一章引言Linux系统性能调优在信息技术领域具有不可忽视的重要性。随着Linux操作系统的广泛应用,从桌面环境到大型服务器集群,其性能优化变得尤为关键。调优不仅可以提升系统的响应速度和吞吐量,还能降低资源消耗,从而延长硬件使用寿命,减少总体拥有成本。本文研究旨在深入探讨Li......
  • 赛场上,教练作战计划迅速Get!编码时,巨量复杂代码轻松掌握!
    赛场上,教练作战计划迅速Get!编码时,巨量复杂代码轻松掌握!与文心快码一起为再次夺冠蓄力!赛场上,教练作战计划迅速Get!编码时,巨量复杂代码轻松掌握在赛场上,教练以敏锐的洞察力,超强的理解力,迅速制定作战计划。同样,在编程的浩瀚宇宙里,面对巨量而复杂的代码海洋,文心快码将成为每位......