monorepo仓库搭建

1. 安装pnpm:npm install pnpm -g
2. pnpm init初始化项目
3. 创建packages/reactivity和packages/shared文件夹

4. 创建pnpm-workspace.yaml

   packages:
       - 'packages/*'

5. 创建.npmrc,编辑内容shamefully-hoist = true;,此举可以暴露安装依赖的所有依赖项目
6. 搭建开发环境pnpm install typescript minimist esbuild -w -D
7. 创建reactivity包: cd reactivity , pnpm init

{
    "name": "@vue/reactivity",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "buildOptions": {
        "name": "VueReactivity", // 打包后的名字
        "formats": [ // 打包的格式,以下表示输出三个格式的文件
            "global",
            "cjs",
            "esm-bundler"
        ]
    }
}

1. 同样的方式常见shared下的包,但shared不需要浏览器可访问,所以formats少一个global属性
2. shared包创建src目录,创建index.ts文件,export一个方法 isObject
3. reactivity包下创建src目录,创建index.ts文件import { isObject } from "@vue/shared";发现报错,说没有找到@vue/shared
4. 在根目录下执行pnpm tsc --init,生程tsconfig.json文件

{
    "compilerOptions": {
    "outDir": "dist", // 输出的目录
    "sourceMap": true, // 输出sourceMap
    "target": "ES2016", // 目标语法
    "module": "esnext", // 模块格式
    "moduleResolution": "node", // 模块解析方式
    "strict": false, // 严格模式
    "resolveJsonModule": true, // 解析json模块
    "esModuleInterop": true, // 允许通过es6语法引入commonjs模块
    "jsx": "preserve", // jsx 不转义
    "lib": ["ESNext","DOM"], // 支持的类库 esnext以及dom
    "baseUrl": ".",
    "paths": {
        "@vue/*": ["packages/*/src"]
        }
    }
}