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