# custom-vue3-project

**Repository Path**: liufengcm/custom-vue3-project

## Basic Information

- **Project Name**: custom-vue3-project
- **Description**: 手写vue3源码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-28
- **Last Updated**: 2022-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目初始化
    mkdir custom-vue3-project
    cd custom-vue3-project
    npm init
    code .

# 创建项目目录
    - packages 包
        - reactivity 双向绑定
        - shared 公共处理函数
    - script
        - dev.js 打包配置
  
> 介绍：vue3拆分为多个包，每个包都可以独立部署

# 安装依赖
    npm i esbuild minimist typescript -D

> esbuild 打包
> minimist 处理打包命令（参数）
> typescript 处理子包与子包之间的依赖关系（子包与子包之间相互引用）

# 为每个子包生成package.json

> 每个子包都是单独的项目

    cd packages/reactivity
    npm init
    mkdir src/index.ts

    cd packages/shared
    npm init
    mkdir src/index.ts

> 修改package.json, 方便打包后使用一些独立的配置

1. cd packages/reactivity 

```
    {
        "name": "@vue/reactivity",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "buildOptions": {
            "name": "VueReactivity",
            "formats": [
                "global",
                "cjs",
                "esm-bundler"
            ]
        } 
    }
```

2. cd packages/shared

```
    {
        "name": "@vue/shared",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "buildOptions": {
            "formats": [
                "cjs",
                "esm-bundler"
            ]
        } 
    }
```


# 配置tsconfig.json

1. tsc init 创建tsconfig.json（注意：如果没有tsc 命令，需要全局安装typescript `npm i typescript -g`）
   
2. 修改tsconfig.json
   > 子包通过访问依赖包的方式引用另一个子包中的函数  `eg: import { isObject } from "@vue/shared"`
   > 解读：当访问`@vue` 开头的包时，会从`packages/*/src 中查找对应文件`

```
    tsconfig.json

    "paths": {
        "@vue/*": [
            "./packages/*/src"
            ]
        },  
```

# 配置打包命令（项目目录下package.json）

1. 新建dev 命令, 打包reactivity

```
 "scripts": {
    "dev": "node script/dev.js reactivity -f global"
  },
```

> 解读：script/dev.js 运行dev.js
> reactivity 打包哪个文件
> -f global 使用global 格式打包

2. minimist 处理打包参数
   
```
const miniMist = require('minimist')
let args = process.argv.slice(2) // 截取打包参数 reactivity -f global
args = miniMist(args)

console.log(args)   // { _: [ 'reactivity' ], f: 'global' }

```

# 配置打包 script/dev.js

```
const miniMist = require('minimist')
const { resolve } = require('path')

const { build } = require('esbuild')

let args = process.argv.slice(2)

args = miniMist(args)
console.log(args)
// 要对哪个子项目进行打包
const target = args._[0] || 'reactivity'

// 指定打包的格式
const f = args.f || 'global'

build({
    entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
    outfile: resolve(__dirname, `../packages/${target}/dist/${target}.${f}.js`),
    bundle: true, // 把所有的文件打包成一个文件
    sourcemap: true, // 调试映射
    format: f === 'global' ? 'iife' : f === 'cjs' ? 'cjs': 'esm' , // 打包格式
    globalName: require(resolve(__dirname, `../packages/${target}/package.json`)).buildOptions.name, 
    platform: f === 'cjs' ? 'node' : 'browser', // 打包平台
    // 监听打包
    watch: {
        onRebuild(error) {
            if (!error) console.log('构建成功')
        }
    }
}).then(() => console.log('初始化构建成功'))
```