YianNotes

“入口”是别人使用你的 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 包上传机制] 详见 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-...

核心思想：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 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. 📚 目...

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

SSH（Secure Shell）1. 什么是 SSH？SSH 是一种加密的网络协议，用于安全地远程登录到服务器和执行命令。 2. 基本连接命令1234567891011# 最基本连接（使用当前用户名）ssh 192.168.1.100# 指定用户名ssh username@192.168.1.100# 指定端口（默认是22）ssh -p 2222 username@192.168.1.100# 使用域名连接ssh username@example.com 3. 高级用法密钥认证（免密码登录）： 12345678# 生成密钥对ssh-keygen -t rsa -b 4096 -C "your_email@example.com"# 将公钥复制到服务器ssh-copy-id username@192.168.1.100# 或者手动复制cat ~/.ssh/id_rsa.pub | ssh username@192.168.1.100 "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized...

前置技能 npm 工具的简单了解 Monorepo 是一种软件开发策略，它将多个项目、模块、包或应用程序的代码存储在同一个版本控制仓库（Repository）中。这与传统的 Multirepo（多仓库）模式形成对比，后者是为每个项目或模块创建一个独立的仓库。 Monorepo (单一仓库): 所有代码都在一个大仓库里，比如 my-company-monorepo/，里面可能包含 packages/frontend/, packages/backend/, packages/shared-utils/, apps/mobile-app/ 等。 Multirepo (多仓库): 每个项目或模块都有自己的独立仓库，比如 frontend-repo/, backend-repo/, shared-utils-repo/, mobile-app-repo/。 快速启动学习Monorepo 的核心思想是将多个项目放在一个仓库里，但要让这种模式高效、可管理，...

一、事件流模型1. 事件流简介事件流描述 DOM 事件 在 DOM 树中传播的完整过程，包含三个阶段： 2. 事件流的三大阶段（1）捕获阶段（Capturing Phase） 事件从 window 向 目标元素 传播 从最外层祖先元素向内传播，直到目标元素 通过 addEventListener 的第三个参数为 true 启用 （2）目标阶段（Target Phase） 事件到达实际触发事件的元素 执行目标元素上绑定的所有事件监听器 此阶段不分捕获和冒泡，按添加顺序执行 （3）冒泡阶段（Bubbling Phase） 事件从 目标元素 向 window 传播 从目标元素向外传播到最外层祖先元素 默认阶段，大多数事件在此阶段触发 3. 完整事件流顺序1234567891011用户交互触发事件 ↓创建事件对象（包含所有事件信息） ↓捕获阶段：window → document → body → 父元素 → 目标元素 ↓（依次执行每个元素上的捕获回调）目标阶段：在目标元素上执行所有监听器 ↓（按添加顺序执行，不分捕获/冒泡）冒泡阶段：目标元素 → 父元素 ...

深入理解对象、函数、[[Prototype]]、prototype、constructor 与属性查找机制 一、核心概念速览 概念 类型 所有者 作用 [[Prototype]] 内部槽（Internal Slot） 所有对象（除 null） 指向原型，用于属性查找 prototype 属性（Property） 函数对象（可构造函数） 作为实例的“模板”对象 constructor 属性（Property） prototype 对象默认属性 指向构造函数本身 原型链 机制 —— 通过 [[Prototype]] 链式查找属性 二、[[Prototype]]：对象的“原型指针”✅ 是什么？ 每个对象（除 null）都有一个内部属性 [[Prototype]] 它是一个指针，指向该对象的“原型”（另一个对象或 null） 它是实现继承和属性查找的核心 ✅ 如何访问？ 推荐：Object.getPrototypeOf(obj) 不推荐：obj.__proto__（已废弃，仅用于调试） 12const obj = {};Objec...