vu3学习

一、monorepo开发环境搭建

1.初始化package.json

js
pnpm init

2.创建.npmrc文件（node-modules依赖平铺显示，方便引入）

js
shamefully-hoist=true

3.创建packages文件夹

4.创建pnpm-workspace.yaml文件

yaml
packages:
  - "packages/*"

此时再去install vue就会出现错误

二、开发环境搭建

1.安装依赖

js
pnpm install typescript esbuild minimist -D -w

2.生成tsconfig.json文件

js
pnpm tsc --init 

更改为以下配置

json
{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "target": "ES2016",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "lib": ["ESNext","DOM"]
  }
}

3.创建scripts文件夹

4.在scripts文件夹下新建dev.js文件

5.新建reactivity文件夹

在packages文件夹下新建reactivity文件夹

6.新建shared文件夹

在packages文件夹下新建shared文件夹

7.修改package.json

找到"scripts": {}的位置添加

js
  "scripts": {
    "dev":"node scripts/dev.js reactivity -f esm"
  }

8.修改dev.js

js
import minimist from "minimist";
const args = minimist(process.argv.slice(2));
console.log(args);

如果出现报错

use import statement outside a module代表了不支持es6语法，需要在package.json中指定type为module

json
{
  "name": "vue3-lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", 
  "scripts": {
    "dev":"node scripts/dev.js reactivity -f esm"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

9.在reactivity和shared文件夹下均添加src/index.ts文件

10.再次修改dev.js

1.解构引用resove

js
import {resolve} from "path";

const entry = resolve(--dirname);

2. 结构引用fileURLToPath

js
import { fileURLToPath } from "url";

3. 创建__filename变量获取文件绝对路径并获取文件夹

js
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
console.log(__dirname,__filename);

也可以通过require获取

js
import { createRequire } from "module";
const require = createRequire(import.meta.url);
console.log(require);

js
import minimist from "minimist";
const args = minimist(process.argv.slice(2));
console.log(args);

4.获取入口文件

```js
const entry = resolve(__dirname,`../packages/${target}$/src/index.ts`);

5.在reactivity和shared的src文件夹下创建package.json文件 添加配置

json
{
    "name":"@vue/reactivity",
    "version": "1.0.0",
    "module": "dist/reactivity.esm-bundler.js",
    "unpkg":"dist/reactivity.global.js",
    "buildOptions": {
    "name": "VueReactivity",
    "formats": [
      "esm-bundler",
      "esm-browser",
      "cjs",
      "global"
    ]
  }
}

json
{
    "name":"@vue/shared",
    "version": "1.0.0",
    "module": "dist/shared.esm-bundler.js",
    "buildOptions": {
    "name": "VueReactivity",
    "formats": [
      "esm-bundler",
      "cjs"
    ]
  }
}

6.编辑shared/src目录下的index.ts文件

1.编写示例函数

js
export function isObject(value) {
    return typeof value === 'object' && value !== null;
}

2.在reactivity/src/index.ts中调用

js
import { isObject } from "../../shared/src";

这样引用，万一文件夹路径改变就会报错了。

7.编辑tsconfig.json

添加baseUrl以及paths

js
  {
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "target": "ES2016",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "lib": ["ESNext","DOM"],
    "baseUrl": ".",
    "paths": {
      "@vue/*":["packages/*/src"]
    }
  }
}

8.命令行测试将@vue/shared安装到@vue/reactivity下

js
pnpm install @vue/shared --workspace --filter @vue/reactivity 

9.修改dev.js

添加

js
const pkg = require(`../packages/${target}/package.json`);
esbuild.context({
    entryPoints: [entry],
    outfile: resolve(__dirname, `../packages/${target}/dist/${target}.js`),
    bundle: true,
    platform: "browser",
    SourceMap: true,
    format,
    globalName: pkg.buildOptions?.name
}).then(() => {
    console.log("start dev");
    return ctx.watch();
});