This topic created in 1511 days ago, the information mentioned may be changed or developed.
今儿拿到个需求，写个 js 库，供第三方使用。
习惯 vue 了，突然就把我整不会了。。
大致是这样，写个 js 库，里面封装好一个小界面和交互。比如一个华丽的 mp3 播放器。 用户直接引入 js ，然后实例化配置，就会在指定的 dom 中插入这个播放器，并使用。
但是已经习惯了 vue 了，是否能用 vue 写这么个东西。最后脱离 vue 成为一个单文件库。
脑子空白一片，没思路。
Supplement 1 · Mar 10, 2022
感谢各位！
总结一下：
vue 、react 这些，运行时应该是需要引入原库的。
至于#15 webpack 、vite 打包，我不确定，有机会试试看。
根据实际情况考虑，jquery 和 iframe 直接 pass 。
我先看看 svelte ，如果不行，就原生 js 写吧。
总结一下：
vue 、react 这些，运行时应该是需要引入原库的。
至于#15 webpack 、vite 打包，我不确定，有机会试试看。
根据实际情况考虑，jquery 和 iframe 直接 pass 。
我先看看 svelte ，如果不行，就原生 js 写吧。
Supplement 2 · Mar 10, 2022
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
 |
1
cydysm Mar 9, 2022
可以啊
注意要支持 script 引入的话就输出 umd 格式 把 vue 和其他一些依赖配置为 external 你可以参考 element 的做法 |
 |
2
Natsuno Mar 9, 2022
上传到 npm 库来引入，不就和你写 vue 正常 import 一样
|
|
3
cydysm Mar 9, 2022
另外 你说的脱离 vue 是 runtime 不需要 vue 吗 那应该不行
|
 |
4
murmur Mar 9, 2022
第三方是什么样的第三方，能拿到源码么，如果是开源的为什么要脱离 vue ，如果是加密的还是建议单 js 引入
|
 |
5
renmu123 Mar 9, 2022 via Android
jQuery 一把梭吧 23333
|
 |
7
snoopyhai OP @cydysm 对，runtime 脱离 vue 。比如目前已经有网站的客户，是 jquery 的。script:src 引入后拿到一个全局变量，然后去实例化配置，之类的。。
|
|
8
snoopyhai OP @murmur 第三方不可控，可以理解为我写了个 js 播放器，各种网站都有可能去使用，有源生的有 jquery 有 vue 有 react 的等等。
|
|
9
cydysm Mar 9, 2022  1
|
 |
10
lower Mar 9, 2022 3
直接以 iframe 方式引入吧😂
|
|
11
snoopyhai OP 补充一下：
第三方是不可控的，就好比早些年间，各大站长喜欢引入站长统计的 js 库一样。 啥技术栈都有，但只要 script:src 引入，并简单配置，就能用起来。 只不过习惯 vue 了，想在界面部分，用 vue 的这种数据绑定模式，写起来顺手。 |
|
12
snoopyhai OP 或者我该看看 svelte ？？
|
 |
13
shakukansp Mar 9, 2022
vue 写完，webpack 编译好打包，给一个 Index.js 的入口，好似没有什么问题
|
|
14
shakukansp Mar 9, 2022
@shakukansp webpack 打包的时候可以选择输出为一个挂载在 window 上的对象的
|
 |
15
GoogleUser Mar 9, 2022 1
Webpack ，Rollup ，Vite 都支持打包成你想要的，要在浏览器里用的话，选择 UMD 模式
建议试试 Vite 的库模式 cn.vitejs.dev/guide/build.html#library-mode |
 |
16
musi Mar 9, 2022 2
考虑一下 Web Components ？
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components |
 |
18
c1273082756 Mar 9, 2022
iframe?
|
 |
19
KouShuiYu Mar 9, 2022
可以把 Vue 打包进去就行了
|
 |
20
JaxXu Mar 9, 2022
petite-vue 可以考虑一下 ， 如果体积受限的话
svelte 如果只是简单的业务可以考虑一下 |
 |
21
narmgalaxy Mar 9, 2022 1
|
 |
22
MrTLJH Mar 9, 2022 via Android 1
纯 js 呗，不会原生 js 了么，何必用 vue
|
 |
23
Envov Mar 9, 2022 via iPhone
vuecli 支持发布指定入口文件，还支持命名空间，你只要在入口文件导出一个函数，函数接受 dom 对象，new vue 的 el 接受该 dom 或者直接 mount()后得到$el 就是响应式的视图，将$el 挂在 dom 的子里面
这个过程中 vue 也参与了构建，那边可以直接 script 引入 |
 |
24
Buges Mar 10, 2022 via Android 1
换 svelt 最合适。vue/react 都得内嵌一个完整的运行时。
|
 |
25
ccyu220 Mar 10, 2022
参考那些嵌入的天气插件。如果是 PC 网页，其实一个 Vue 的运行时并没有多大。
|
 |
26
chnwillliu Mar 10, 2022 via Android
运行时让使用者引入，那你的库就是个 Vue 组件库，参考其他 Vue 组件库写法就行。
运行时包括在库里，那就把你写的组件库套一层 Vue App 初始化的代码，向外暴露一个普通函数就行。 |
 |
27
lin07hui Mar 10, 2022
npm create vite@latest my-vue-app -- --template vanilla
|
|
28
lin07hui Mar 10, 2022 1
npm create vite@latest my-vanilla-ts-app -- --template vanilla-ts
|
 |
29
lblblong Mar 10, 2022 1
试试 svelte ，看看我这个： https://github.com/lbl-tools/lbl-toast
|
 |
30
AlphaTr Mar 11, 2022
vue-cli 也有库模式，支持 vue 的 inline 打包，应该可以的
vue-cli-service build --target lib --inline-vue |
Select Language