这是一个创建于 1379 天前的主题，其中的信息可能已经有所发展或是发生改变。
今儿拿到个需求，写个 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