搭建内置内部库的vue3组件在线解释交互器

Posted 2022-06-21 wen_rc

名词解释

在线解释交互器

可参考 https://sfc.vuejs.org/ 输入代码后可在浏览器实时看到执行效果，对使用一些UI组件库，能快速体验，试不同的参数很方便

REPL

read、eval、print、loop，如他的名字一样，拿到用户输入，执行，输出，然后重复上述步骤。
Vue也开源了他们的REPL https://github.com/vuejs/repl，以组件形式封装好

<script setup>
import  Repl  from '@vue/repl'
import '@vue/repl/style.css'
</script>  
<template>   
    <Repl /> 
</template>

问题

vue的REPL可在这里import esm格式的文件

比如在这里就引入了vue环境，并把他命名为vue，这样在App.vue就可直接引入了

看这个esm文件（ https://sfc.vuejs.org/vue.runtime.esm-browser.js ），发现也确实导出了ref

现在希望公司内部的UI库也内置进去，这样大家能在线快速体验到这个UI库。这个UI库是一个Vue插件，里面定义了很多vue组件，所以用法也类似element ui，import 插件和css，然后use一下就可以

因此目前就存在以下几个问题

1. 怎么使用vue插件，似乎拿不到Vue？或者转变下思路怎么注册这些vue组件？
2. 怎么打包出单一的esm格式文件?
3. 怎么把文件部署到内网CDN？
4. 能否自动化一些操作？比如之后更新了组件版本，自动更新在线环境使用的对应组件版本？

解决方法

怎么使用vue插件，似乎拿不到Vue？或者怎么注册这些vue组件

这里参考了 https://juejin.cn/post/7064864648729722887
vue的REPL能接受一个store参数，
去看store的源码(https://github.com/vuejs/repl/blob/main/src/store.ts)，能看到示例代码就是放到this.state.files里的

files传入了this.state

然后this作为属性又传给了REPL组件

同理，import的文件也是这样传入的，只不过是放到import-map.json文件

这时再参考varlet的写法（https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui-playground/src/store.ts）

似乎确实是可行的，搞多一个隐藏的文件，然后use一下插件，暴露方法给App.vue使用即可

同时varlet也这样引入了css

那使用插件这个问题就解决了。
一开始还想着能不能搞个IIFE，但后来发现不是同一个vue环境（一个是REPL里面的环境，一个是使用REPL组件的环境，我们编写代码是在第二个环境，要影响第一个环境，只能用REPL的API），我们是要在REPL里面的环境里加IIFE，这似乎没找到api，只能给他提供esm文件来实现。

打包出单一的esm格式文件?

项目是使用rollup打包的，按照rollup里的文档，配置单一入口的input即可，需要内联的第三方库就不加到external里，不需要的，比如vue，就加进去，这样打出来的esm文件就会内联你需要npm modules。

打包的时候可能还会报错，因为用的npm modules大多是cmd格式，而不是esm的，这时搭配rollup的commonjs插件使用即可解决。

文件部署到内网CDN？

这里用到一些内网的服务就不细说了

自动化

比如当内部组件库有新版本时，能不能方便的更新这个在线解释交互器使用的组件库版本？
这里的是通过监听内部组件库的git项目，如果打了新的tag（发了新的版本，都会打tag的），就去构建需要的文件，然后部署到CDN解决的。因为用了内部的一些服务，这里就不细说了。这样每次组件库发布，在线解释交互器使用的组件库版本也更新到最新了。