这是我参与「第五届青训营」伴学笔记创作活动的第 16 天

五、Play Ground

Hview UI Playground 源码：ChaiMayor/hview-ui-playground: the playfround of hview-ui (github.com)

使用自动化部署项目流程：

pnpm run actions-publish -> 组件库打包，版本+1，发布 npm -> playground 的 packages.json 版本+1（play 和 hview-plus 版本一致，然后 import 引入包的版本实现，线上引入版本统一），项目打包 -> 将 play 推送到 github 分支 -> 触发 actions 将 dist 目录下内容 -> 发布到 服务器的网站目录下

1. 拉取代码进行修改

varlet/packages/varlet-ui-playground at dev · varletjs/varlet (github.com)

将该仓库 PlayGround 的代码进行克隆到本地项目的 packages 目录下

 git clone https://github.com/varletjs/varlet.git

2. 项目内容

1）核心内容

找到 store.ts 文件，里面会有 welcomeCode、hviewImports、hviewReplPluginCode、containerCode 这几个配置变量

 -- welcomeCode            # 保存着首页的 App.vue 存储的代码，pnpm run dev 打开后调试器就在运行这个文件内容
 -- hviewImports           # 这个调试器需要引入的所有的依赖包，包括依赖包依赖的包也需要引入，都使用 cdn 链接进行引入
 -- hviewReplPluginCode    # 插件页的代码，运行的调试器会从这个页面抽取功能然后使用，注册 hview-plus 和引入 hview-plus 的 css 样式
 -- containerCode          # 页面打开时运行的代码，一般从插件页拿注册函数，全局注册 hview-plus 模块

2）CDN 链接问题

凡是发布的 npm 包，unpkg 都对其做了 cdn 索引：unpkg.com/:package

play ground 模块使用的 cdn 必须是 ESMoudle 文件

注意点：play ground 不支持引入 css 的 cdn 链接，所以需要动态创建标签插入网页来实现引入样式包

请勿在组件库的包中存在引入 css 情况，否则 playground 无法使用

A. 查找最新版的依赖包示例 hview-plus

使用 unpkg 链接加 包名的方法，按下回车它会按照 依赖包最新版 的默认导出文件来寻找，不过寻找到的都是 lib 版本，需要手动改一下

这里引入的是 es 路径下的，index.mjs 文件

B. 依赖包路径代码不明确情况

上一个直接修改路径，是因为我知道这个包的文件目录情况

比如 @intlify/devtools-if 这个包我就不知道 es 文件在哪里，所以我就在 npm 搜索了这个包，然后查看他的目录情况

包名/dist/devtools-if.esm-bunder.js 这个路径

我先使用 unpkg 搜索这个包，找到这个包的最新版的链接

接下来将 /index.js 替换成 /dist/devtools-if.esm-bunder.js ，然后将这个路径引入到 playground 即可