记录每天自我学习转前端的碎碎念，仅作加强记忆的笔记和自我监督打卡使用。
pnpm install @vue/shared --workspace --filter @vue/reactivity
--filter：精确指定操作对象
作用：限定命令仅在指定的子包（@vue/reactivity）中执行，而非整个 monorepo 工作区。
语法：--filter <包名或选择器>，支持精确包名、通配符（如 @vue/*）或依赖关系选择（如 ... 表示依赖链）
仅在 @vue/reactivity 包中执行安装
pnpm --filter @vue/reactivity install
--workspace：安装本地工作区包
作用：将 @vue/shared 视为当前 monorepo 中的本地包（而非远程 npm 仓库的包），并创建软链接指向其源码目录（而非下载）
依赖声明：在 @vue/reactivity 的 package.json 中，会生成 "@vue/shared": "workspace:*"，确保始终引用本地最新代码。
优势：修改 @vue/shared 源码后，@vue/reactivity 即时生效，无需重新发布或安装。
{
"scripts" : {
"dev": "pnpm -r --parallel run dev",
"build": "pnpm -r run build",
"build:web": "pnpm --filter web run build"
},
"dependencies": {
"@vue/shared": "workspace:^",
"@vue/reactivity": "workspace:*"
}
}
pnpm -r :递归在所有workspace包里执行同名script
pnpm -r --parallel :并行跑，适合dev
pnpm --filter web run build :只对web包执行build
【workspace:】协议
workspace:* :用当前workspace里同名的任意版本，并链接到源码目录，开发联调默认用这个
workspace:^或者workspace:~ :按semver匹配workspace内版本，发布时pnppm会把它替换成实际版本号（如1.0.0），所以发布到npm的包不会还带着workspace:
// semver 是 Semantic Versioning（语义化版本）的缩写，它是一种用于软件版本号管理的标准化规范,当一个子包（Package A）依赖另一个子包（Package B）时，工具会根据 package.json 中声明的版本范围（如 ^1.2.3）自动选择符合 SemVer 规则的、已安装的版本
"scripts": {
"dev" : "node scripts/dev.js reactivity -f esm"
},
node dev.js (要打包的名字 -f 打包的格式) === argv
关于-f参数：
打包后的模块规范
1.global，即iife
生成IIFE（立即执行函数）格式，用于浏览器全局变量
示例：reactivity.global.js
引用方式：
2.cjs：生成CommonJS模块格式，用于Node.js环境
示例：reactivity.cjs.js
引用方式：const { reactive } = require('@vue/reactivity')
3.esm
生成ES模块格式，用于浏览器或打包工具
示例：reactivity.esm.js
引用方式：import { reactive } from './reactivity.esm.js'
关于package.json中字段
"main": "./dist/index.cjs", // 对应commonjs引入方式的程序入口文件,webpack 等打包工具会根据 package.json 文件中的 main 字段的值来确定模块的入口文件。默认情况下，Webpack 会将 main 指定的文件作为应用程序的入口点。如果 main 字段未定义，Webpack 会查找默认入口文件，通常是 index.js
"module": "./dist/index.js", // module 字段允许包作者明确指定在使用 ES module 时应该加载的文件。如果没有指定 module 字段，那么在使用 ES module 时，会默认使用 main 字段指定的文件。
"type" : "module", // "module" | "commonjs";不配置模式是commonjs，此时.js将被视为commonjs，并且我们需要将esmodule文件显示声明为.mjs/.esm.js(实际上你声明成.xxx.js也可以，甚至.xxx也行，但不建议)。
当为module时，此时.js文件将被视为esmodule，我们需要将commonjs文件显示声明为.cjs。
exports 字段可以对于包中导出的路径进行封装
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"./unstyled": {
"types": "./dist/unstyled.d.ts", // 可以省略，但不建议
"import": "./dist/unstyled.js",
"require": "./dist/unstyled.cjs"
},
"./*": "./*"
},
1 .则代表根目录，使用import xx from 'your-package-name';
2-要使用 exports 中定义的 feature，你可以按照以下方式在你的代码中导入它,相当于是子模块
import feature from 'your-package-name/feature';
可以看到 exports 关键字中定义的 key 为 import 和 require 分别表示两种不同的模块引入方式使用该包时引入的不同文件路径。
types或typings
在 package.json 中，types 和 typings 都用于指定 TypeScript 类型定义文件的位置，但它们之间有些区别。
types指定 TypeScript 的类型定义文件（.d.ts）的位置，是 TypeScript 2.0 及以后版本推荐的字段。
typings是早期的字段，用于指定类型定义的路径，在 TypeScript 2.0 后被 types 替代，但仍被支持以保持向后兼容。
如果同时存在 types 和 typings 字段，TypeScript 优先使用 types
当package.json中字段type设置成【commonjs】时可以直接使用__dirname、 __filename等变量和require方法
当package.json中字段type设置成【module】时，是没有__dirname、 __filename和require等，原因如下
在 Node.js 的 ES 模块（ESM）环境中，__dirname 和 __filename 这两个变量是不可用的。这是因为 ES 模块遵循 ECMAScript 规范，而该规范并未定义这些 Node.js 特有的全局变量
在 CommonJS 模块系统中，__dirname 和 __filename 是由 Node.js 提供的全局变量，用于获取当前文件所在的目录和文件路径。但在 ES 模块中，这些变量不再可用，因为它们属于 Node.js 的特定实现，并非标准 JavaScript 的一部分。
对于没有时可以通过相关方法自己实现
import {dirname} from "path"
import {fileURLToPath} from "url"
import {createRequire} from "module"
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename)
const require = createRequire(import.meta.url)
对于monorepo管理的项目，如果想要在根目录下安装依赖，则命令行需要加-w参数
pnpm install typescript esbuild minimist -D -w
