跳到主要内容

Yalc(药吃)

前言​

为什么要本地调试组件库？​

在做项目架构设计的时，为了让项目更健壮和易于维护，会在组件库进行组件化开发。

当你正在开发一个组件库/sdk/插件或其他npm库的时候，如果你想知道它们在一个前端项目上被依赖/被使用的真正效果时，你应该怎么做？

例如：

demo依赖了ui，我在ui实现了一个功能，但我想知道它在demo中的实际表现如何，我应该怎么做呢？

一般来说，我有以下几种选择：

1.通过相对或绝对路径引用​

// import { Button } from 'ui'
// 为了调试，强行改成了绝对或者相对路径
import { Button } from 'C:/codes/ui/dist'

此方案缺点：需要频繁改业务代码，这既麻烦又危险，毕竟谁能保证人类不犯错呢？。

  1. 发布到npm源后再调试​

# 去ui里升级版本&发布
npm version prerelease # 升级版本
npm publish # 发布
# 在admin-management中
npm install goood-ui@latest

此方案缺点：污染了npm版本线，且需要频繁npm install，效率也不高

  1. 使用npm link或yarn link调试
  • 在全局包路径（Global Path）下创建一个软连接(Symlinked)指向ui的dist包;
  • 在demo里通过软连接，将全局的软链接指向其node_modules/ui 通常也需要两步：
# 第一步 在ui中执行：
npm link
# or
yarn link
# 第二步 在admin-management中执行：
npm link ui
# or
yarn link ui

npm link/yarn link有什么问题？​

npm link

  • 与全局安装的npm包或其他项目依赖的版本冲突。

  • 影响node_modules中原本的包

  • 软链接和文件系统引发的其他各种奇怪的问题

  • --legacy-peer-deps忽略冲突。

  • 对于已存在的组件库调试还需要修改一些参数。

yarn link

  • 也存在依赖冲突问题
  • 影响node_modules中原本的包
  • 软链接和文件系统引发的其他各种奇怪的问题

什么是yalc​

对包开发者而言，一种比yarn/npm link更好的开发流程。

yalc 是一个简单的、基于文件系统的包管理器，它可以让你在本地开发和测试你的 npm 模块，而不需要发布到 npm 仓库。

  1. 借助 nodemon 和 yalc 来实现组件库的本地联调。

    nodemon 是一个用于开发 Node.js 应用的工具，它会监视你的文件变化，并在文件变化时自动重启你的应用

npm install -g yalc
npm i nodemon -g
  1. 在组件库中package.json添加
"watch": "nodemon --ignore dist/ --ignore node_modules/ --watch src/ -C -e ts,tsx,scss,less --debug -x \"npm run build && yalc push\""
  1. 在组件库项目中使用 yalc 来发布包。会将包添加到 yalc 的本地仓库
yalc publish
npm run watch
  1. 在主系统项目中，你可以使用 yalc 来添加组件库
yalc add <package-name> --link
  1. 清除yalc本地依赖包
yalc remove <package-name>
// or
yalc remove --all // 移除所有依赖并还原

测试demo​

https://github.com/LwcReber/yalc-project