YianNotes

学习目标理解： JavaScript 为什么能够调用浏览器提供的各种能力？ 例如： 123456789document.querySelector()setTimeout()fetch()requestAnimationFrame()addEventListener() 这些 API 为什么 JavaScript 可以直接使用？ 答案： 因为浏览器 Runtime 提供了 Binding 层，把 JavaScript 世界连接到浏览器 C++ 实现。 一、浏览器不是只有 V8浏览器内部包含多个模块。 大致： 123456789101112131415161718192021Browser Process | |Renderer Process | |Runtime | ├── V8 | ├── Blink | ├── Scheduler | ├── Network Interface | ├── Storage | └── Other Web APIs V8 的职责V8...

🎯 一、file: 协议是什么？ 🔥 一句话定义：file: 协议是一种 URL 格式，用来指向你本地硬盘上的文件，就像文件资源管理器的路径一样。 📁 二、基本语法1234file:[//<host>]<path> └──┬───┘ └──┬──┘ │ └── 路径（必须） └───────── 主机名（可选） 常见形式 格式 说明 示例 file:///路径 本地文件（最常见） file:///C:/Users/Alice/docs/hello.txt file://主机名/路径 网络共享文件（少见） file://server/shared/report.pdf ✅ 三个斜杠 ///：前两个是 语法中的://，第三个表示“根目录” 🌰 三、实际例子1. 打开本地 HTML 文件1file:///Users/Alice/project/index.html 👉 在浏览器地址栏输入，就能打开你电脑上的 index.html 2. 引用本地图片1<img src...

npm（Node Package Manager） 是一个 包管理工具（Package Manager），它的主要职责是： 安装依赖：npm install lodash 发布包：npm publish（把你的代码发布到 npm 仓库） 管理版本：通过 package.json 和 package-lock.json 运行脚本：通过 npm run build、npm run dev 等 ✅ 一句话总结 package.json 是一个 项目说明书，它告诉： 你：这个项目依赖哪些包、怎么运行 npm / yarn / pnpm：怎么安装、发布、管理这个项目 别人：这是个什么项目、怎么使用它 它就像一本书的“封面 + 目录 + 前言”。 🧩 举个生活例子：开餐馆 类比 对应 package.json 餐馆名字 "name": "小王面馆" 菜单（有什么菜） "scripts"：start, build 等命令 食材从哪进货 "dependencies&q...

学习目标理解： JavaScript 为什么需要 GC GC 如何判断对象是否存活 GC 如何避免长时间卡顿 GC 如何与 JavaScript 一起运行 现代 V8 GC 的整体设计思想 一、为什么需要 GCJavaScript 没有： 12delete obj;free(ptr); 对象什么时候释放，由 V8 Garbage Collector 自动决定。 GC 的目标： 回收已经无法访问的对象，释放 Heap 内存。 二、JavaScript 内存模型Stack（栈）存放： 局部变量 参数 返回地址 对象引用（Reference） 例如： 123function test() { let a = {};} 运行时： 123456Stacka │ ▼Heap Object Stack 保存的是引用。 不是对象。 Heap（堆）真正对象存放的位置： 1234567{}[]FunctionMapSetDateDOM Wrapper GC 回收的是 Heap。 三、GC 如何判断对象是否存...

npm workspace 是从 npm 7 开始引入的一个强大特性，用于管理包含多个相互依赖的包（packages）的大型项目，通常称为 monorepo（单体仓库）。 简单来说，npm workspace 允许你在一个根项目中管理多个相互关联的子项目（包），并让它们共享依赖、简化版本管理和跨包依赖。 一、核心概念 Monorepo (单体仓库)： 一个代码仓库中包含多个独立的包（packages）。 例如：一个项目包含前端应用 (packages/frontend)、后端服务 (packages/backend)、共享工具库 (packages/utils)。 Workspace： 指 monorepo 中的一个子包。 每个 workspace 都是一个独立的 npm 包，拥有自己的 package.json 文件。 Root Project (根项目)： 包含所有 workspace 的顶层目录。 它的 package.json 文件通过 workspaces 字段来声明和配置所有子 workspace。 二、 npm Workspace1. 📚 目...

软链接硬链接pnpm 和 npm 都是 Node.js 生态系统中的包管理器，用于安装、更新、卸载和管理项目依赖。它们的主要区别体现在性能、磁盘空间使用、依赖结构和安装方式上。 以下是 pnpm 和 npm 的主要区别： 1. 依赖存储方式（核心区别） npm: 从 npm 3.x 开始，npm 采用扁平化依赖结构（flat dependency tree）。 它会将所有依赖尽可能地提升到 node_modules 的根目录，以减少嵌套层级。 但是，当存在版本冲突时，它仍然会在子目录中安装不同版本的包。 每个项目都会独立下载和存储其依赖，即使多个项目使用相同的包版本，也会在各自的 node_modules 中重复存储，占用更多磁盘空间。 pnpm: 采用内容可寻址存储（Content-Addressable Store）和硬链接（Hard Links）机制。 所有下载的包都存储在一个全局的、单一的内容可寻址存储中（通常位于用户主目录下，如 ~/.pnpm-store）。 当一个项目需要某个包时，pnpm 会从全局存储中创建指向该包的硬链接到项目的 node_modul...

“入口”是别人使用你的 npm 包时，程序从哪个文件开始加载。它是包的“正门”。 🔑 一、核心入口字段 字段 用途 使用场景 main CommonJS 入口（Node.js 默认） require('pkg') module ES Module 入口（打包工具优先） import 'pkg'（Webpack/Vite） exports 精细控制多入口（现代推荐） 现代项目首选 browser 浏览器环境入口（旧方式） 兼容老项目 🧩 二、字段详解1. main —— Node.js 的“老朋友” ✅ 作用：定义 require('your-pkg') 时加载的文件 ✅ 默认值：index.js（不推荐依赖默认） ✅ 格式：CommonJS（module.exports） ❌ 问题：不支持 tree-shaking（打包工具无法“摇掉”未用代码） 123{ "main": "dist/index.js"} 2. modu...

核心思想：npm publish 就是把本地项目打包并上传到 npm 服务器，别人通过 package.json.name 安装和引用。而 npm pack 是理解这一过程的“关键钥匙”。 1️⃣ 什么是 npm pack？npm pack 是一个 本地打包命令，它会： 读取当前目录下的 package.json 根据配置打包项目文件 生成一个 .tgz 压缩包文件（tarball） 不会上传到任何地方，只在本地生成文件 🔧 类比：就像你写了一本书，npm pack 相当于把你写的书打包成一个 ZIP 文件，存在自己电脑上，还没寄给出版社。 2️⃣ npm pack 能做什么？（核心用途） 用途 说明 ✅ 预演发布 检查最终发布的内容是否正确 ✅ 验证打包范围 看看哪些文件被打包了（有没有误包含 node_modules？） ✅ 检查包名和版本 确认生成的 .tgz 文件名是否符合预期 ✅ 离线分发 把 .tgz 文件发给同事，他们可以用 npm install ./xxx.tgz 安装 ✅ CI/CD 流程测试 在自动化流程...

[npm 包上传机制] 详见 npm 包上传机制 Q: 使用 npm 开发一个组件库 但是每次都需要上传 然后 install 这样改下 就要下载重新测试 极其麻烦 ✅ 总结 方法 是否需要发布 实时性 推荐度 npm publish + install ✅ 需要 ❌ 差 ⭐☆☆☆☆ npm link ❌ 不需要 ✅ 好 ⭐⭐⭐⭐☆ yalc ❌ 不需要 ✅ 好 ⭐⭐⭐⭐☆ pnpm workspace ❌ 不需要 ✅ 最佳 ⭐⭐⭐⭐⭐ 1. npm link（最原生，最常用）📌 原理npm link 利用操作系统的 符号链接（symlink），将你本地的组件库项目“链接”到另一个项目的 node_modules 中，就像真的安装了一样。 🔧 使用步骤步骤 1：在组件库项目中注册为可链接12cd your-component-libnpm link 这会把你的库注册到全局的 npm 链接列表中（类似全局安装了一个软链接）。 步骤 2：在测试项目中链接该库12cd your-test-appnpm link your-component-...

硬链接（Hard Link）是文件系统中一种特殊的机制，它允许同一个文件在文件系统中拥有多个文件名（或路径）。你可以把它理解为文件数据的“别名”或“多个入口”。 核心概念 指向数据，而非文件名： 在大多数现代文件系统（如 NTFS, ext4）中，文件数据存储在磁盘的某个物理位置。 文件名（或路径）只是一个指向这些实际数据的“指针”或“入口”。 一个硬链接就是创建一个新的文件名（路径），但它指向的是同一个文件数据块，而不是复制数据。 共享数据： 通过硬链接创建的多个文件名，它们共享完全相同的数据。 无论你通过哪个名字去读取或修改文件内容，看到的都是同一份数据。修改其中一个，其他所有硬链接也会立即反映出这些修改。 没有“原文件”和“链接文件”之分： 与“快捷方式”或“符号链接”不同，硬链接之间是完全平等的。 你无法区分哪个是“原始”文件，哪个是“链接”。它们都是文件数据的有效入口。 删除行为： 删除一个硬链接（即删除一个文件名），并不会删除文件数据本身。 文件数据会一直保留，直到所有指向它的硬链接都被删除。 文件系统通过一个“链接计数”（link count...