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

[snoopyhai]

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

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

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

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

脑子空白一片，没思路。

感谢各位！

总结一下：

vue 、react 这些，运行时应该是需要引入原库的。
至于#15 webpack 、vite 打包，我不确定，有机会试试看。

根据实际情况考虑，jquery 和 iframe 直接 pass 。

我先看看 svelte ，如果不行，就原生 js 写吧。

24小时汇报。

跟着svelte的官方教程看了一点点，然后vite的官方教程看了一点点。

首先基于vite把svelte项目搭起来： yarn create vite

然后修改vite配置文件改为库模式，参考： https://cn.vitejs.dev/guide/build.html#library-mode

创建库模式中的entry文件：

import App from './App.svelte'
export default App

打包： yarn build

使用：随便一个普通的html文件，script:src 方式引入打包后生成的umd文件；写一个挂载点的DOM<div id="app"></div>; 最后实例化new myLib({target: document.getElementById('app')})

当然除了target还有其它参数，比如使用{props: {a: 1, b: 2}}传参，详见 https://svelte.dev/docs#run-time-client-side-component-api

[cydysm]

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

[Natsuno]

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

[cydysm]

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

[murmur]

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

[renmu123]

jQuery 一把梭吧 23333

[Jaufey]

@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 如果只是简单的业务可以考虑一下

[narmgalaxy]

@snoopyhai
这个是可以的。
svelte 是可以方便的做出 web Components

[MrTLJH]

纯 js 呗，不会原生 js 了么，何必用 vue

[Envov]

vuecli 支持发布指定入口文件，还支持命名空间，你只要在入口文件导出一个函数，函数接受 dom 对象，new vue 的 el 接受该 dom 或者直接 mount()后得到$el 就是响应式的视图，将$el 挂在 dom 的子里面

这个过程中 vue 也参与了构建，那边可以直接 script 引入

[Buges]

换 svelt 最合适。vue/react 都得内嵌一个完整的运行时。

[ccyu220]

参考那些嵌入的天气插件。如果是 PC 网页，其实一个 Vue 的运行时并没有多大。

[chnwillliu]

运行时让使用者引入，那你的库就是个 Vue 组件库，参考其他 Vue 组件库写法就行。

运行时包括在库里，那就把你写的组件库套一层 Vue App 初始化的代码，向外暴露一个普通函数就行。

[lin07hui]

npm create vite@latest my-vue-app -- --template vanilla

[lin07hui]

npm create vite@latest my-vanilla-ts-app -- --template vanilla-ts

[lblblong]

试试 svelte ，看看我这个： https://github.com/lbl-tools/lbl-toast

[AlphaTr]

vue-cli 也有库模式，支持 vue 的 inline 打包，应该可以的

vue-cli-service build --target lib --inline-vue