手写vue3.0 -项目结构初始化

去看源码

项目初始化

mkdir custom-vue3-project
cd custom-vue3-project
npm init
code .
1
2
3
4

创建项目目录

- packages 包
    - reactivity 双向绑定
    - shared 公共处理函数
- script
    - dev.js 打包配置
1
2
3
4
5

介绍：vue3拆分为多个包，每个包都可以独立部署

安装依赖

npm i esbuild minimist typescript -D
1

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

为每个子包生成package.json

每个子包都是单独的项目

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

cd packages/shared
npm init
mkdir src/index.ts
1
2
3
4
5
6
7

修改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"
            ]
        } 
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. cd packages/shared

    {
        "name": "@vue/shared",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "buildOptions": {
            "formats": [
                "cjs",
                "esm-bundler"
            ]
        } 
    }
1
2
3
4
5
6
7
8
9
10
11
12

配置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"
            ]
        },  
1
2
3
4
5
6
7

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

1. 新建dev 命令, 打包reactivity

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

解读：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' }

1
2
3
4
5
6

配置打包 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('初始化构建成功'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30