【开发】前端本地调试组件库方案

【开发】前端本地调试组件库方案 [ 前端 ]

晚安月亮文章正文

椰奶冻

{{nature("2024-05-29 15:53:32")}}更新

现在业务变多经常涉及到组件库的问题，如果只是在参考环境调试效率很低，不能覆盖到业务场景，还需要反复调试，因此，我们就需要对 build 后的产物进行测试。

常见的有三种方案：

1. 发版进行测试

# 组件开发完成后，修改版本号
yarn build

# publish
npm login
npm publish

# 然后在测试的项目中
yarn add my-component
# my-component 来自于 组件开发 目录下的 package.json 中的 name 属性

一方案是我们日常应用中最直接的使用场景，然而其缺陷在于我们可能需要频繁发布beta版本，这不仅不利于多人协作和包的版本管理，同时也会显著影响开发和调试的效率。

2. `npm link` / `yarn link`

在组件库中使用 npm link / yarn link 后会在全局设置一个软链接，接着我们就可以在测试的项目目录中，通过 npm link <my-component> 引入。

# 组件开发完成后，修改版本号
yarn build
yarn link
# or
# npm link

# 然后在测试的项目中
yarn link my-component-package
# or
# npm link my-component-package

接着在测试项目目录下的 node_modules 中就可以看到我们的组件库 my-component 被链接到了测试的项目中。

缺点：有可能造成依赖冲突的问题！

参考文档：

[npm-link] https://docs.npmjs.com/cli/v7/commands/npm-link [yarn-link] https://yarn.bootcss.com/docs/cli/link/

yalc 本地调试

yalc 是一个可以在本地模拟 npm package 发布环境的工具，yalc官方文档。

yalc 主要本地化了一个 npm 的存储库，通过 yalc publish 可以把构建的产物发布到本地。通过 yalc add <pkg> 可以达到 npm install <pkg> 或 yarn add <pkg> 的效果。

# 全局安装 yalc
yarn global add yalc

# 在组件目录
# build package
yarn build

# 发布
yalc publish

# 在本地项目目录下
# 引用
yalc add my-component

# 更新引用package的依赖
yarn

# （没有人能一次成功）更新组件代码时，cd 到组件开发的目录下
# build package
yarn build

# 更新 yalc 中的引用
yalc push

# 如果组件的依赖有更新
yarn

# 调试结束后移除 yalc 安装的包
yalc remove --all

总体来说3方案是目前比较优秀的解决方案，成本较低，比较推荐！