YALC 本地实现联调组件库

如果想在本地开发环境中联调你的组件库，你可以使用 yalc 工具。yalc 是一个简单的、基于文件系统的包管理器，它可以让你在本地开发和测试你的 npm 模块，而不需要发布到 npm 仓库。

一、基础手动版

1）首先，你需要在你的组件库项目中安装 yalc。你可以使用 npm 或 yarn 来安装：

npm install -g yalc

2）然后，你可以在你的组件库项目中使用 yalc 来发布你的包。这会将你的包添加到 yalc 的本地仓库：

yalc publish

3）在你的主系统项目中，你可以使用 yalc 来添加你的组件库

yalc add your-component-library

这会将你的组件库添加到你的主系统项目的 node_modules 目录，并在你的 package.json 文件中添加一个 yalc 字段。

4）当你的组件库有更新时，你可以再次运行 yalc publish 来更新你的包，然后在你的主系统项目中运行 yalc update 来获取更新：

yalc update your-component-library

5）清除yalc本地依赖包

yalc remove your-component-library
// or
yalc remove --all // 移除所有依赖并还原

6）git push 时忽略本地依赖

/yalc.lock
.yalc/

二、watch 观察模式

• 借助 nodemon 和 yalc 来实现组件库的本地联调。
• nodemon 是一个用于开发 Node.js 应用的工具，它会监视你的文件变化，并在文件变化时自动重启你的应用。

1）安装依赖，你可以使用 npm 或 yarn 来安装：

npm i yalc -g
npm i nodemon -g

// yarn add 

2) 【组件库】然后，你可以在你的组件库项目中添加watch模式来监听组件库的改变。

"watch": "nodemon --ignore dist/ --ignore node_modules/ --watch src/ -C -e ts,tsx,scss,less --debug -x \"npm run build && yalc push\""

• 在上述脚本中，nodemon 被配置为监视 src/ 目录下的 .ts、.tsx 、.scss、.less 文件的变化，忽略 dist/ 和 node_modules/ 目录，当文件变化时，它会执行 -x 参数后面的命令。

• npm run build && yalc push 是 nodemon 在文件变化时会执行的命令。npm run build 会构建你的组件库，yalc push 会将构建的结果推送到 yalc 的本地仓库。

• yalc push 命令会将你的包推送到 yalc 的本地仓库，并自动更新所有已经添加了这个包的项目。这意味着，当你的组件库有更新时，你的主系统项目会自动获取到更新。

使用yalc发布组件库到本地yalc仓库 并启动监听

yalc publish 
npm run watch

3）【主系统】关联组件库

 yalc add your-component-library --link

--link 参数的作用是创建一个符号链接，而不是复制文件。这意味着当你在你的组件库中做出更改时，这些更改将立即反映在你的主系统项目中，无需重新添加或更新包。

 "dependencies": {
    ...,
    "your-component-library": "link:.yalc/your-component-library",
}

4）【主系统】善后 在你的主系统中断开与组件库的链接

yalc remove your-component-library
// or
yalc remove --all // 移除所有依赖并还原

• yalc remove --all 命令的作用是从你的项目中移除所有通过 yalc 添加的本地包。这个命令会从你的 node_modules 目录和 package.json 文件中移除这些包。
• 在你完成组件库的本地联调并确认所有更改都已正确应用后，你可能会想要将你的组件库发布到 npm 或其他包管理仓库，然后在你的项目中使用这个发布的版本，而不是本地版本。在这种情况下，你可以使用 yalc remove --all 来移除本地版本，然后使用 npm install 或 yarn add 来添加发布的版本。

5）git push 时忽略本地依赖 

/yalc.lock
.yalc/

注意：

• 在启动主系统中可能会遇到主系统中未安装组件库依赖的问题。这是因为yalc并不会自动安装组件库的依赖，而是需要你手动在主系统安装。解决这个问题的方法是使用yalc add命令将组件库添加到主项目中，然后在主项目中运行npm install或yarn来安装所有依赖。
• 如果你的组件库有一些peerDependencies，那么你需要在主项目中手动安装这些peerDependencies。
• 此外，你还可以在主项目的.gitignore文件中添加以下内容，以防止yalc的临时文件被提交到git：

/yalc.lock

.yalc/

这样，你就可以使用yalc进行本地联调，同时避免了主项目中未安装组件库依赖的问题。