Necessary Pigeonholing Mechanism

    vite-plugin-remote-module

    1.1.0 • Public • Published

    vite-plugin-remote-module

    在vite中通过http链接加载远程模块

    相关链接

    使用

    插件注册

    // vite.config.js
    import {defineConfig} from 'vite'
    import vue from '@vitejs/plugin-vue'
    import remoteModulePlugin from 'vite-plugin-remote-module'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        remoteModulePlugin()
      ]
    })

    静态加载

    import Demo from '@remote/http://localhost:3000/demo.vue'

    异步加载

    async function asyncLoadDemo() {
      const ans = await import('@remote/http://localhost:3000/demo.vue')
      compRef.value = ans.default
    }

    动态加载

    import {loadRemoteComponent} from '@vite-plugin-remote-module';
    
    const componentList = [
      {id: 1, name: 'demo', url: 'http://localhost:3000/demo.vue'},
      {id: 2, name: 'demo2', url: 'http://localhost:3000/demo2.vue'},
      {id: 3, name: 'demo3', url: 'http://localhost:3000/demo3.vue'},
    ]
    
    async function loadComp(item) {
      const {url} = item
      compRef.value = await loadRemoteComponent(url)
    }
    
    loadComp(componentList[0])
    loadComp(componentList[1])
    loadComp(componentList[2])

    打包

    一些限制

    如果是已经下载到本地的远程模块(静态加载和异步加载),按照常规打包即可

    如果是动态加载的模块,需要确保远程模块已经被下载,否则在打包后可能存在找不到对应模块的情况

    安全性

    由于加载远程模块的原理是:将远程模块下载到本地并加载,因此请注意不要加载未信任的远程模块,这可能会造成安全问题!!

    本地调试

    git clone 仓库
    
    # 安装插件依赖
    npm i 
    
    # 安装vite项目依赖
    cd example && npm i 
    
    # 启动vite
    npm run dev

    然后浏览器访问vite服务即可

    Install

    npm i vite-plugin-remote-module

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    5

    Last publish

    Collaborators

    • shymean