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

去看源码

项目初始化

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"
            ]
        } 
    }
  1. 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 格式打包

  1. 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('初始化构建成功'))
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值