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

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

  •  
  •   snoopyhai ·
    nmtuan · 156 天前 · 3006 次点击
    这是一个创建于 156 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    脑子空白一片,没思路。

    第 1 条附言  ·  155 天前
    感谢各位!

    总结一下:

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

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

    我先看看 svelte ,如果不行,就原生 js 写吧。
    第 2 条附言  ·  155 天前

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

    @snoopyhai runtime 脱离应该是不可以的
    lower
        10
    lower  
       156 天前   ❤️ 3
    直接以 iframe 方式引入吧😂
    snoopyhai
        11
    snoopyhai  
    OP
       156 天前
    补充一下:

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

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

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

    运行时包括在库里,那就把你写的组件库套一层 Vue App 初始化的代码,向外暴露一个普通函数就行。
    lin07hui
        27
    lin07hui  
       155 天前
    npm create [email protected] my-vue-app -- --template vanilla
    lin07hui
        28
    lin07hui  
       155 天前   ❤️ 1
    npm create [email protected] my-vanilla-ts-app -- --template vanilla-ts
    lblblong
        29
    lblblong  
       154 天前   ❤️ 1
    试试 svelte ,看看我这个: https://github.com/lbl-tools/lbl-toast
    AlphaTr
        30
    AlphaTr  
       154 天前
    vue-cli 也有库模式,支持 vue 的 inline 打包,应该可以的

    vue-cli-service build --target lib --inline-vue
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4266 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 08:24 · PVG 16:24 · LAX 01:24 · JFK 04:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.