V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
snoopyhai
V2EX  ›  Vue.js

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

  •  
  •   snoopyhai ·
    nmtuan · 2022-03-09 14:53:55 +08:00 · 3964 次点击
    这是一个创建于 751 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今儿拿到个需求,写个 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 写吧。
    第 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

    30 条回复    2022-03-11 12:29:43 +08:00
    cydysm
        1
    cydysm  
       2022-03-09 14:56:32 +08:00
    可以啊
    注意要支持 script 引入的话就输出 umd 格式
    把 vue 和其他一些依赖配置为 external
    你可以参考 element 的做法
    Natsuno
        2
    Natsuno  
       2022-03-09 14:56:57 +08:00
    上传到 npm 库来引入,不就和你写 vue 正常 import 一样
    cydysm
        3
    cydysm  
       2022-03-09 14:57:44 +08:00
    另外 你说的脱离 vue 是 runtime 不需要 vue 吗 那应该不行
    murmur
        4
    murmur  
       2022-03-09 14:58:41 +08:00
    第三方是什么样的第三方,能拿到源码么,如果是开源的为什么要脱离 vue ,如果是加密的还是建议单 js 引入
    renmu123
        5
    renmu123  
       2022-03-09 14:58:51 +08:00 via Android
    jQuery 一把梭吧 23333
    WhateverYouLike
        6
    WhateverYouLike  
       2022-03-09 15:00:01 +08:00 via Android
    @cydysm 调用方引用这个 umd 时,也需要 vue 运行时环境的吧?
    snoopyhai
        7
    snoopyhai  
    OP
       2022-03-09 15:00:21 +08:00
    @cydysm 对,runtime 脱离 vue 。比如目前已经有网站的客户,是 jquery 的。script:src 引入后拿到一个全局变量,然后去实例化配置,之类的。。
    snoopyhai
        8
    snoopyhai  
    OP
       2022-03-09 15:03:17 +08:00
    @murmur 第三方不可控,可以理解为我写了个 js 播放器,各种网站都有可能去使用,有源生的有 jquery 有 vue 有 react 的等等。
    cydysm
        9
    cydysm  
       2022-03-09 15:03:56 +08:00   ❤️ 1
    @WhateverYouLike 需要的 在页面另外引入就 ok 了

    @snoopyhai runtime 脱离应该是不可以的
    lower
        10
    lower  
       2022-03-09 15:04:57 +08:00   ❤️ 3
    直接以 iframe 方式引入吧😂
    snoopyhai
        11
    snoopyhai  
    OP
       2022-03-09 15:06:36 +08:00
    补充一下:

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

    只不过习惯 vue 了,想在界面部分,用 vue 的这种数据绑定模式,写起来顺手。
    snoopyhai
        12
    snoopyhai  
    OP
       2022-03-09 15:07:41 +08:00
    或者我该看看 svelte ??
    shakukansp
        13
    shakukansp  
       2022-03-09 15:12:41 +08:00
    vue 写完,webpack 编译好打包,给一个 Index.js 的入口,好似没有什么问题
    shakukansp
        14
    shakukansp  
       2022-03-09 15:13:15 +08:00
    @shakukansp webpack 打包的时候可以选择输出为一个挂载在 window 上的对象的
    GoogleUser
        15
    GoogleUser  
       2022-03-09 15:19:23 +08:00   ❤️ 1
    Webpack ,Rollup ,Vite 都支持打包成你想要的,要在浏览器里用的话,选择 UMD 模式
    建议试试 Vite 的库模式
    cn.vitejs.dev/guide/build.html#library-mode
    musi
        16
    musi  
       2022-03-09 15:22:23 +08:00   ❤️ 2
    snoopyhai
        17
    snoopyhai  
    OP
       2022-03-09 15:28:46 +08:00
    @musi 我研究研究
    c1273082756
        18
    c1273082756  
       2022-03-09 15:30:49 +08:00
    iframe?
    KouShuiYu
        19
    KouShuiYu  
       2022-03-09 15:38:07 +08:00
    可以把 Vue 打包进去就行了
    JaxXu
        20
    JaxXu  
       2022-03-09 19:50:34 +08:00
    petite-vue 可以考虑一下 , 如果体积受限的话
    svelte 如果只是简单的业务可以考虑一下
    narmgalaxy
        21
    narmgalaxy  
       2022-03-09 20:04:28 +08:00   ❤️ 1
    @snoopyhai
    这个是可以的。
    svelte 是可以方便的做出 web Components
    MrTLJH
        22
    MrTLJH  
       2022-03-09 21:34:22 +08:00 via Android   ❤️ 1
    纯 js 呗,不会原生 js 了么,何必用 vue
    Envov
        23
    Envov  
       2022-03-09 23:19:17 +08:00 via iPhone
    vuecli 支持发布指定入口文件,还支持命名空间,你只要在入口文件导出一个函数,函数接受 dom 对象,new vue 的 el 接受该 dom 或者直接 mount()后得到$el 就是响应式的视图,将$el 挂在 dom 的子里面

    这个过程中 vue 也参与了构建,那边可以直接 script 引入
    Buges
        24
    Buges  
       2022-03-10 01:38:37 +08:00 via Android   ❤️ 1
    换 svelt 最合适。vue/react 都得内嵌一个完整的运行时。
    ccyu220
        25
    ccyu220  
       2022-03-10 08:39:36 +08:00
    参考那些嵌入的天气插件。如果是 PC 网页,其实一个 Vue 的运行时并没有多大。
    chnwillliu
        26
    chnwillliu  
       2022-03-10 10:31:15 +08:00 via Android
    运行时让使用者引入,那你的库就是个 Vue 组件库,参考其他 Vue 组件库写法就行。

    运行时包括在库里,那就把你写的组件库套一层 Vue App 初始化的代码,向外暴露一个普通函数就行。
    lin07hui
        27
    lin07hui  
       2022-03-10 11:37:13 +08:00
    npm create vite@latest my-vue-app -- --template vanilla
    lin07hui
        28
    lin07hui  
       2022-03-10 11:38:06 +08:00   ❤️ 1
    npm create vite@latest my-vanilla-ts-app -- --template vanilla-ts
    lblblong
        29
    lblblong  
       2022-03-10 17:12:48 +08:00   ❤️ 1
    试试 svelte ,看看我这个: https://github.com/lbl-tools/lbl-toast
    AlphaTr
        30
    AlphaTr  
       2022-03-11 12:29:43 +08:00
    vue-cli 也有库模式,支持 vue 的 inline 打包,应该可以的

    vue-cli-service build --target lib --inline-vue
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2686 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 15:29 · PVG 23:29 · LAX 08:29 · JFK 11:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.