能用 vue 写个独立的 js 文件供第三方用么？

[snoopyhai]

今儿拿到个需求，写个 js 库，供第三方使用。

习惯 vue 了，突然就把我整不会了。。

大致是这样，写个 js 库，里面封装好一个小界面和交互。比如一个华丽的 mp3 播放器。 用户直接引入 js ，然后实例化配置，就会在指定的 dom 中插入这个播放器，并使用。

但是已经习惯了 vue 了，是否能用 vue 写这么个东西。最后脱离 vue 成为一个单文件库。

脑子空白一片，没思路。

[cydysm]

可以啊
注意要支持 script 引入的话就输出 umd 格式
把 vue 和其他一些依赖配置为 external
你可以参考 element 的做法

[Natsuno]

上传到 npm 库来引入，不就和你写 vue 正常 import 一样

[cydysm]

另外 你说的脱离 vue 是 runtime 不需要 vue 吗 那应该不行

[murmur]

第三方是什么样的第三方，能拿到源码么，如果是开源的为什么要脱离 vue ，如果是加密的还是建议单 js 引入

[renmu123]

jQuery 一把梭吧 23333

[WhateverYouLike]

@cydysm 调用方引用这个 umd 时，也需要 vue 运行时环境的吧？

[snoopyhai]

@cydysm 对，runtime 脱离 vue 。比如目前已经有网站的客户，是 jquery 的。script:src 引入后拿到一个全局变量，然后去实例化配置，之类的。。

[snoopyhai]

@murmur 第三方不可控，可以理解为我写了个 js 播放器，各种网站都有可能去使用，有源生的有 jquery 有 vue 有 react 的等等。

[cydysm]

@WhateverYouLike 需要的 在页面另外引入就 ok 了

@snoopyhai runtime 脱离应该是不可以的

[lower]

直接以 iframe 方式引入吧😂

[snoopyhai]

补充一下：

第三方是不可控的，就好比早些年间，各大站长喜欢引入站长统计的 js 库一样。
啥技术栈都有，但只要 script:src 引入，并简单配置，就能用起来。

只不过习惯 vue 了，想在界面部分，用 vue 的这种数据绑定模式，写起来顺手。

[snoopyhai]

或者我该看看 svelte ？？

[shakukansp]

vue 写完，webpack 编译好打包，给一个 Index.js 的入口，好似没有什么问题

[shakukansp]

@shakukansp webpack 打包的时候可以选择输出为一个挂载在 window 上的对象的

[GoogleUser]

Webpack ，Rollup ，Vite 都支持打包成你想要的，要在浏览器里用的话，选择 UMD 模式
建议试试 Vite 的库模式
cn.vitejs.dev/guide/build.html#library-mode

[musi]

考虑一下 Web Components ？
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

[snoopyhai]

@musi 我研究研究

[c1273082756]

iframe?

[KouShuiYu]

可以把 Vue 打包进去就行了

[JaxXu]

petite-vue 可以考虑一下 ， 如果体积受限的话
svelte 如果只是简单的业务可以考虑一下