去看源码
项目初始化
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, 方便打包后使用一些独立的配置
- cd packages/reactivity
{
"name": "@vue/reactivity",
"version": "1.0.0",
"description": "",
"main": "index.js",
"buildOptions": {
"name": "VueReactivity",
"formats": [
"global",
"cjs",
"esm-bundler"
]
}
}
- cd packages/shared
{
"name": "@vue/shared",
"version": "1.0.0",
"description": "",
"main": "index.js",
"buildOptions": {
"formats": [
"cjs",
"esm-bundler"
]
}
}
配置tsconfig.json
-
tsc init 创建tsconfig.json(注意:如果没有tsc 命令,需要全局安装typescript
npm i typescript -g
) -
修改tsconfig.json
子包通过访问依赖包的方式引用另一个子包中的函数
eg: import { isObject } from "@vue/shared"
解读:当访问@vue
开头的包时,会从packages/*/src 中查找对应文件
tsconfig.json
"paths": {
"@vue/*": [
"./packages/*/src"
]
},
配置打包命令(项目目录下package.json)
- 新建dev 命令, 打包reactivity
"scripts": {
"dev": "node script/dev.js reactivity -f global"
},
解读:script/dev.js 运行dev.js
reactivity 打包哪个文件
-f global 使用global 格式打包
- 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('初始化构建成功'))