vue3源码(一)搭建开发环境

Monorepo:是管理项目代码的一个方式,指在一个项目仓库(repo)中管理多个模块/包(package)
vue3源码采用Monorepo管理项目

vue3项目架构

在这里插入图片描述

搭建Monorepo环境

1.全局安装pnpm

npm install pnpm -g # 全局安装pnpm
pnpm init -y # 初始化配置文件

创建.npmrc文件:如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modules,就是将你安装的依赖包的依赖包的依赖包的…都放到同一级别(扁平化)

shamefully-hoist = true

配置workspace
新建 pnpm-workspace.yaml :将packages下所有的目录都作为包进行管理

packages:- 'packages/*'

2.安装环境

pnpm install typescript rollup rollup-plugin-typescript2 @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-commonjs minimist execa@4 esbuild   -D -w
  • typescript vue3使用ts
  • rollup 打包工具
  • rollup-plugin-typescript2 rollup 和 ts的 桥梁
  • @rollup/plugin-json 支持引入json
  • @rollup/plugin-node-resolve 解析node第三方模块
  • @rollup/plugin-commonjs 将CommonJS转化为ES6Module
  • minimist 命令行参数解析
  • execa@4 开启子进程
  • esbuild

3.ts

初始化:pnpm tsc --init
常用配置文件:

{"compilerOptions": {"outDir": "dist", // 输出的目录"sourceMap": true, // 采用sourcemap"target": "es2016", // 目标语法"module": "esnext", // 模块格式"moduleResolution": "node", // 模块解析方式"strict": false, // 严格模式"resolveJsonModule": true, // 解析json模块"esModuleInterop": true, // 允许通过es6语法引入commonjs模块"jsx": "preserve", // jsx 不转义"lib": ["esnext", "dom"], // 支持的类库 esnext及dom}
}

4.创建模块

在这里插入图片描述
reactivity/package.json

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

shared/package.json

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

formats为自定义的打包格式:

  • esm-bundler在构建工具中使用的格式
  • esm-browser在浏览器中使用的格式
  • cjsnode中使用的格式
  • global立即执行函数的格式
pnpm install @vue/shared@workspace --filter @vue/reactivity"baseUrl": ".",
"paths": {"@vue/*": ["packages/*/src"]
}

5.开发环境esbuild打包

"scripts": {"dev": "node scripts/dev.js reactivity -f global"
}
const { build } = require('esbuild')
const { resolve } = require('path')
const args = require('minimist')(process.argv.slice(2));const target = args._[0] || 'reactivity';
const format = args.f || 'global';const pkg = require(resolve(__dirname, `../packages/${target}/package.json`));const outputFormat = format.startsWith('global')// 输出的格式? 'iife': format === 'cjs'? 'cjs': 'esm'const outfile = resolve( // 输出的文件__dirname,`../packages/${target}/dist/${target}.${format}.js`
)build({entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],outfile,bundle: true,sourcemap: true,format: outputFormat,globalName: pkg.buildOptions?.name,platform: format === 'cjs' ? 'node' : 'browser',watch: { // 监控文件变化onRebuild(error) {if (!error) console.log(`rebuilt~~~~`)}}
}).then(() => {console.log('watching~~~')
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营day28 || 93.复原IP地址,78.子集,90.子集II

视频讲解: 回溯算法如何分割字符串并判断是合法IP?| LeetCode:93.复原IP地址_哔哩哔哩_bilibili 回溯算法解决子集问题,树上节点都是目标集和! | LeetCode:78.子集_哔哩哔哩_bilibili 回溯算法解决子集问题…

Docker基础语法

目录 一.docker安装 二.docker基础名词 三.docker基础命令 四.命令别名 五.数据卷 六.挂载本地目录或文件 七.Docker镜像 八.网络 一.docker安装 1.安装yum工具 yum install -y yum-utils device-mapper-persistent-data lvm2 2.安装 docker yum源 yum-config-manag…

【Effective C++11】5. 实现

Item26 尽量延后变量定义式的出现时间 定义变量(自定义变量)未使用,会承担构造成本和析构成本,考虑以下场景: 如果有异常出现,encrypted 没有被使用,但是会付出构造和析构的成本;通…

WEB前端伪类选择器以及伪元素选择器

表单补充 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><form action"#" method"get" enctype"text/plain"><!-- <input type"…

EXECL 单元格字符串链接 CONCAT :应用:将一行数据转为json

源&#xff1a; 目标 函数表示 CONCAT("data", CHAR(10), "{", CHAR(10), " ", "ulAlarmId : ", A5, CHAR(10), " ", "ulAlarmLevel : ", D5, CHAR(10)," ", "bBo…

JavaEE-微服务-Vuex

Vuex 2.1 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 Vuex在组件之间共享数据。 2.2 使用 vue cli 构建项目 2.3 入门案例 2.3.1 定义数据 export default new Vuex.Store({state: { // 状态区域&#xff08;定义变量区域&#xff09;user: ,toke…

python学习笔记10(循环结构2)

&#xff08;一&#xff09;循环结构2 1、扩展模式 语法&#xff1a; for 循环变量 in 遍历对象&#xff1a; 语句块1 else: 语句块2 说明&#xff1a;else在循环结束后执行&#xff0c;通常和break和continue结合使用 2、无限循环while while 表达式&#xff1a; 语句块…

Ubuntu Desktop 隐藏 / 显示文件和文件夹

Ubuntu Desktop 隐藏 / 显示文件和文件夹 1. GUI hot key2. Show hidden and backup filesReferences 1. GUI hot key Ctrl H: 隐藏 / 显示文件和文件夹 2. Show hidden and backup files Edit -> Preferences -> Views References [1] Yongqiang Cheng, https://yo…

梳理Langchain-Chatchat知识库API接口

一.Langchain-Chatchat 知识库管理 1.Langchain-Chatchat 对话和知识库管理界面 Langchain-Chatchat v0.28 完整的界面截图&#xff0c;如下所示&#xff1a; 2.知识库中源文件和向量库 知识库 test 中源文件和向量库的位置&#xff0c;如下所示&#xff1a; 3.知识库表结构 k…

一夜暴增200城,智驾开城秘诀在哪?小鹏、理想、大疆等各有不同

作者 |Marshall 编辑 |祥威 一夜过后&#xff0c;城市NOA可用范围突然增至两百多城市&#xff0c;这是最近小鹏的智驾给大家的印象。 我们曾在「特斯拉、小鹏开路&#xff0c;城市NOA距好用还有几年&#xff1f;」一文中&#xff0c;探讨了城市NOA落地过程中所面临的地图问题…

vue3-组件基础

什么是组件 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行处理。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构。 定义一个组件 我们一般会将 Vue 组件定义在一个单独的 .vue 文件中&#xff0c;这被叫做单文件组件 (简称…

TypeScript 实用技巧(中)

十四、向类型添加特殊值 原文&#xff1a;exploringjs.com/tackling-ts/ch_special-values.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 14.1 在带内添加特殊值 14.1.1 向类型添加 null 或 undefined 14.1.2 向类型添加符号 14.2 在带外添加特殊值 14.2…

ES查询语法介绍及举例

1. ES查询语法 Elasticsearch&#xff08;ES&#xff09;的查询语法非常强大且灵活&#xff0c;允许执行从简单到复杂的各种搜索操作。ES查询主要基于两种类型&#xff1a;Leaf Query Clauses&#xff08;叶查询子句&#xff09;和Compound Query Clauses&#xff08;复合查询…

Arduino开发实例-NEO-6M GPS模块使用

NEO-6M GPS模块使用 文章目录 NEO-6M GPS模块使用1、硬件准备1.1 NEO-6M GPS模块介绍1.2 硬件接线原理图2、代码实现2.1 GPS数据接收2.2 GPS数据组成2.3 解析GPS数据2.4 在OLED中显示GPS数据本文将展示如何将 NEO-6M GPS 模块与 Arduino 连接。 NEO-6M GPS 模块是一个 GPS 接收…

HJ9 提取不重复的整数【C语言】

【华为机试题 HJ9】提取不重复的整数 描述输入描述:输出描述:示例1参考代码1参考代码2描述 输入一个 int 型整数,按照从右向左的阅读顺序,返回一个不含重复数字的新的整数。 保证输入的整数最后一位不是 0 。 数据范围: 1 ≤ n ≤ 10^8 输入描述: 输入一个int型整数 …

[亲测有效]CentOS7下安装mysql5.7

前言 近期项目需要搭配mysql一起存储相关数据&#xff0c;但对mysql的版本有要求&#xff0c;于是在服务器搭建了mysql5.7&#xff0c;顺便记录一下搭建步骤和踩坑解决步骤。 目录 前言 一、清除旧安装包 二、安装YUM 三、使用yum命令即可完成安装 四、重新设置密码 五、…

美妆-美妆种类

粉底液 作用&#xff1a; 整体肤色提亮&#xff0c;匀称肤色&#xff0c;提升皮肤质感&#xff0c;轻微遮瑕&#xff0c; 中低价位&#xff1a;kate&#xff0c;妙巴黎 遮瑕 作用&#xff1a; 强力遮盖皮肤瑕疵 种类&#xff1a; 遮瑕膏&#xff0c;遮瑕液&#xff0c;遮…

JavaScript总结(三)

今日成果&#xff1a; 27.对象 var xiaoming { name:小明, birth:1990, school:No.1 Middle School, score:null, middle-school:no1.school//不是一个有效变量 }; xiaoming.name;//小明 xiaoming[middle-school];//no1.school xiaoming.age;//undefined…

文心一言 v.s. ChatGPT:多角度对比测评“追赶者”能否超越?

ChatGPT自发布以来就引发了关注热潮&#xff0c;如今国内大模型的发展也是如火如荼、百花齐放&#xff1a;比如百度的文心一言、阿里的通义千问、讯飞的星火大模型等等&#xff0c;那么作为后起之秀的国内大模型与ChatGPT相比哪个更好用呢&#xff1f;“追赶者”能否实现超越&a…

使用Unity创建VisionPro应用

1、下载特定Unity版本 Unity账号需要是Pro账号,普通账号不行,目前只支持这1个Unity版本,不要下载任何其它版本:unityhub://2022.3.11f1/d00248457e15) 其它条件:使用Mac电脑M系列芯片,XCode15 Beta2及以上 参考资料: 苹果官网:苹果官网 Unity官网:Unity官网 官方教程…