代码拉取完成，页面将自动刷新
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 处理子包与子包之间的依赖关系（子包与子包之间相互引用）
每个子包都是单独的项目
cd packages/reactivity
npm init
mkdir src/index.ts
cd packages/shared
npm init
mkdir src/index.ts
修改package.json, 方便打包后使用一些独立的配置
{
"name": "@vue/reactivity",
"version": "1.0.0",
"description": "",
"main": "index.js",
"buildOptions": {
"name": "VueReactivity",
"formats": [
"global",
"cjs",
"esm-bundler"
]
}
}
{
"name": "@vue/shared",
"version": "1.0.0",
"description": "",
"main": "index.js",
"buildOptions": {
"formats": [
"cjs",
"esm-bundler"
]
}
}
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"
]
},
"scripts": {
"dev": "node script/dev.js reactivity -f global"
},
解读：script/dev.js 运行dev.js reactivity 打包哪个文件 -f global 使用global 格式打包
const miniMist = require('minimist')
let args = process.argv.slice(2) // 截取打包参数 reactivity -f global
args = miniMist(args)
console.log(args) // { _: [ 'reactivity' ], f: 'global' }
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('初始化构建成功'))
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手