初篇
什么是monorepo？
英文层面 单个代码仓库
"mono" -》 'single'
"repo" -》 'repository'
一种管理代码的方式，所有代码统一在一个git仓库中管理
非monorepo
这样管理代码的话会出现大量重复代码
典型monorepo代码管理方式
什么是pnpm?
请自行探究 pnpm
进阶
最小monorepo架构图？
最简单的monorepo仓库是什么样子？
首先需要创建一个小demo
初始化一个 version control systems git
apps 业务代码
packages 公共代码
mkdir demo-single-repo
cd demo-single-repo
git init
mkdir apps packages
apps/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最小monorepo demo</title>
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>
apps/index.js
import { add } from '../../packages/utils/index.js'
function createElement() {
const div = document.createElement('div')
div.innerHTML = `add计算结果${add(1,2)}`
document.body.appendChild(div)
}
createElement()
utils/inde.js
export const add = (a, b) => a + b
启动vscode静态服务器 （Open with live serve）,直接通过chrome浏览器打开，会报CORS错误
怎么引入node.js体系进行建设？
引入package.json, pnpm workspace进行包管理
npm init -y
几个要点
获取包的策略采用 workspace协议
pnpm-workspace.yaml
packages:
# 公共管理库
- 'packages/**'
# 业务库
- 'apps/**'
# 排除测试文件夹
- '!**/test/**'
引入单个仓库的包
"@x/utils": "workspace:*"
package.json 告诉node采用的模块策略是 esm
如果是通过 esm 方式访问的话入口文件通过 "module": "index.js" 声明
{
"type": "module"
"module": "index.js",
}
node app1/index.js
import { add } from '@x/utils'
console.log('add(1,2)', add(1,2)) // 3
