一句话文学:
说清楚:一个正常完整的,创建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
在 app1
的 package.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-lib
的 package.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 在 app1
的 package.json
中添加依赖:
{
"dependencies": {
"shared-lib": "*"
}
}
4.2 在 app1
的代码中使用:
const { utilFunction } = require('shared-lib');
console.log(utilFunction());
4.3 安装所有依赖
yarn install
Yarn 会自动安装并链接所有项目包。
5. 打包流程
5.1 配置打包脚本
为每个项目定义打包脚本。在 app1
的 package.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