大纲 ​

• pnpm 特点（幽灵依赖，磁盘复用，软硬链接）
• workspace
• changeset
• monorepo 打包
• catalog
• 常用命令

css 3d ​

api ​

transform-style ​

声明 3D 空间，一般作用在容器盒子上

rotate[XYZ]时，正值为顺时针，负值为逆时针；左手定则。

TinyMCE三种模式 ​

1. 经典模式：基于iframe的沙箱模式，总是显示操作栏且拥有大量的操作按钮；样式上并非所见即所得（iframe的原因），更适合展示性要求不高的场景，比如表单项。
2. 内联模式：基于普通块元素为容器（div），实现阅读视图和编辑视图的合并，所见及所得，不总是显示菜单栏；更适合展示性较强的场景，比如文章内容。
3. 无干扰模式，似乎只是比内联模式少了菜单栏，使用上下文菜单，操作更加的轻巧（maybe）。

install & setup ​

npm i tinymce

概述 ​

View Transitions Api View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。 ps:不同dom之间的视图过渡

常见的过渡/动画创建方式 ​

1. transition/keyframes （ 补间动画，帧动画 ）
2. requestAnimationFrame （ js 动画，每帧回调 ）
3. Web Animation Api（ 和css动画一样在合成层渲染，js更好的干预和控制 ）
4. View Transitions Api （ 两个视图或者dom之间的过渡 ）

signature_pad ​

npm i signature_pad

为什么使用 Js 实现瀑布流 ​

瀑布流的本质：获取获取最小高度的列，向其中添加图片，使列之间保持一个尽可能接近的高度。

能否使用 Css 实现？flex ? grid ? ​

不能，css 并不能计算出列的最小高度，所以必须使用 js 实时计算。

Steps ​

1. 在 window resize的时候计算列的数量
2. 缓存一个 < 列 ，高度 > 的对象，每次塞图片，更新对象的列高度
3. 从缓存 map 中找到最小高的列，向其中塞入图片
4. 在 窗口 resize 的时候， 对已有元素重排
5. 触底加载更多图片

如何并发build多个package ​

通常情况下一个项目下有一个 rollup.config.js 文件来做打包配置。在多包情况下也可以在根目录下配置一个 rollup.config.js文件，

在配置文件中动态的获取入口和输出目录。

如何动态获取？

我们可以在构建的时候控制命令参数传给进程，使用 node 的进程 process.env 获取。

配置packages路径 ​

import path from 'node:path'
import { fileURLToPath } from 'url'


export const projRoot = path.resolve(fileURLToPath(import.meta.url), '../','../')
export const pkgRoot = path.resolve(projRoot, 'packages')

export const directivesRoot = path.resolve(pkgRoot, 'directives')
export const componentsRoot = path.resolve(pkgRoot, 'components')
export const hooksRoot = path.resolve(pkgRoot, 'hooks')
export const stylesRoot = path.resolve(pkgRoot, 'styles')
export const utilsRoot = path.resolve(pkgRoot, 'utils')

由于是 esmodule ,是无法识别 __dirname 的，可以使用 fileURLToPath方法转换模块路径为相对路径