TOMMYHU

类似vue中的template
组件没有实际的意义，可以理解为一个用来配合wx:if或者wx:for 渲染一个或多个view的块组件。
1.

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">   <view> view1 </view>   <view> view2 </view> </block>

2.

类似 block wx:if ，也可以将 wx:for 用在 标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">   <view> {{index}}: </view>   <view> {{item}} </view> </block>

2022春分，苏州，大雨，

webpack5中文文档 https://webpack.docschina.org/configuration/

为什么要用 Prisma？https://zhuanlan.zhihu.com/p/142607078

https://prisma.yoga/getting-started/quickstart

https://mp.weixin.qq.com/s/L45_UQYY9MXMlHjDxtPB2g

npm install lottie-web
https://github.com/airbnb/lottie-web

Monorepo 是管理项目代码的一个方式,是一种代码组织的概念，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个 repo。

目前有不少大型开源项目采用了这种方式，如 Babel：

How is the repo structured?
The Babel repo is managed as a monorepo that is composed of many npm packages.
还有 create-react-app, react-router 等。可以看到这些项目的第一级目录的内容以脚手架为主，主要内容都在 packages 目录中、分多个 package 进行管理。

monorepo 最主要的好处是统一的工作流和Code Sharing。比如我想看一个 pacakge 的代码、了解某段逻辑，不需要找它的 repo，直接就在当前 repo；当某个需求要修改多个 pacakge 时，不需要分别到各自的 repo 进行修改、测试、发版或者 npm link，直接在当前 repo 修改，统一测试、统一发版。只要搭建一套脚手架，就能管理（构建、测试、发布）多个 package。

不好的方面则主要是 repo 的体积较大。特别是，因为各个 package 理论上都是独立的，所以每个 package 都维护着自己的 dependencies，而很大的可能性，package 之间有不少相同的依赖，而这就可能使install时出现重复安装，使本来就很大的 node_modues 继续膨胀（我称这为「依赖爆炸」...）。

基于对以上的理解，我认为当项目到一定的复杂度，需要且可以划分模块、但模块间联系紧密的，比较适合用 monorepo 组织代码。

目前最常见的 monorepo 解决方案是
Lerna https://github.com/lerna/lerna 和
yarn 的 workspaces 特性https://classic.yarnpkg.com/en/docs/workspaces/。
其中，lerna 是一个独立的包，其官网的介绍是：

a tool that optimizes the workflow around managing multi-package repositories with git and npm.
上面提到的 Babel, create-react-app 等都是用 lerna  进行管理的。在项目 repo 中以lerna.json声明 packages 后，lerna 为项目提供了统一的 repo 依赖安装 (lerna bootstrap)，统一的执行 package scripts (lerna run)，统一的 npm 发版 (lerna publish) 等特性。对于「依赖爆炸」的问题，lerna 在安装依赖时提供了--hoist选项，相同的依赖，会「提升」到 repo 根目录下安装，但……太鸡肋了，lerna 直接以字符串对比 dependency 的版本号，完全相同才提升，semver 约定在这并不起作用。

具体的使用方法移步 Lerna 官网：https://lerna.js.org

而使用 yarn 作为包管理器的同学，可以在 package.json 中以 workspaces 字段声明 packages，yarn 就会以 monorepo 的方式管理 packages。相比 lerna，yarn 突出的是对依赖的管理，包括 packages 的相互依赖、packages 对第三方的依赖，yarn 会以 semver 约定来分析 dependencies 的版本，安装依赖时更快、占用体积更小；但欠缺了「统一工作流」方面的实现。

yarn 官网对 workspace的详细说明：Workspaces | Yarn

lerna 和 yarn-workspace 并不是只能选其一，大多 monorepo 即会使用 lerna 又会在 package.json 声明 workspaces。这样的话，无论你的包管理器是 npm 还是 yarn，都能发挥 monorepo 的优势；要是包管理是 yarn ，lerna 就会把依赖安装交给 yarn 处理。

  watch(     () => [unref(getCanResize), unref(getDataSourceRef)?.length],     () => {       debounceRedoHeight();     },     {       flush: 'post',     },   );

通过 flush：post可以避免副作用，在DOM更新后运行副作用，确保模板引用与DOM保持同步，并引入正确的元素。

<template>   <div ref="root">This is a root element</div> </template> <script>   import { ref, watchEffect } from 'vue'   export default {     setup() {       const root = ref(null)       watchEffect(() => {         console.log(root.value) // => <div></div>       },       {         flush: 'post'       })       return {         root       }     }   } </script>

declare type TimeoutHandle = ReturnType<typeof setTimeout>; let timer: TimeoutHandle; timer = setTimeout(() => {       readyRef.value = true;     }, wait);

# typescript\lib\lib.es5.d.ts type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

安装 yarn add --dev patch-package postinstall-postinstall 创建补丁 $ npx patch-package package-name   # 使用npm $ yarn patch-package package-name  # 使用yarn 部署 "scripts": {   "postinstall": "patch-package" }