背景

最近的項(xiàng)目有一個(gè)加載遠(yuǎn)程組件的需求?；诖宋覍?duì) Vue 加載遠(yuǎn)程組件的方案進(jìn)行了研究，并且整理了兩個(gè)可行的解決方案。

HTML 文件 umd 組件

這個(gè)方案是最簡(jiǎn)單、最容易實(shí)現(xiàn)的。組件以 umd 的格式進(jìn)行打包，然后在 HTML 文件中直接使用。

<div id="app"> <test-input></test-input></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> // 將組件 URL 掛載到 script 標(biāo)簽上，然后通過(guò) window 獲取這個(gè)組件 await lodaScript('http://localhost/component/input/0.1.0/bundle.js') app.component('TestInput', window.TestInput)</script>

但是這個(gè)方案不適合在大型項(xiàng)目中使用，效率比較低。

Vue 工程項(xiàng)目 esm /umd 組件

vue 工程項(xiàng)目 esm /umd 組件是我目前在使用的方案，但是在研究的過(guò)程中遇到了兩個(gè)問(wèn)題，逐一解決后，才把這個(gè)方案趟通了。

第一個(gè)問(wèn)題 Relative references must start with either "/", "./", or "../"

由于我們的項(xiàng)目不需要兼容 IE，所以打包組件采用的是 esm 格式。打包后的組件源碼如下：

import { reactive } from 'vue'// other code...

然后在主項(xiàng)目中進(jìn)行引用：

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

在動(dòng)態(tài)導(dǎo)入遠(yuǎn)程組件到項(xiàng)目時(shí)，提示報(bào)錯(cuò) Relative references must start with either "/", "./", or "../"。這是因?yàn)樵跒g覽器中不支持以 import { reactive } from 'vue' 的方式進(jìn)行導(dǎo)入，得把 'vue' 改成 https://…./vue.js 或者 './vue.js' 的形式才可以。平時(shí)我們這樣用沒(méi)問(wèn)題是因?yàn)橛?vite、webpack 等構(gòu)建工具幫忙解決了這個(gè)問(wèn)題。

第二個(gè)問(wèn)題 Vue 上下文環(huán)境不同

產(chǎn)生上面的問(wèn)題是因?yàn)橐胍蕾?，如果打包組件時(shí)把相關(guān)依賴都打在一起，那不就沒(méi)有 import 語(yǔ)句了。結(jié)果試了一下還是不行，因?yàn)楫?dāng)前的 Vue 主項(xiàng)目和打包好的 Vue 組件存在兩個(gè)不同的 Vue 上下文。導(dǎo)致在加載組件時(shí)報(bào)錯(cuò)，比如提示 xxx 變量找不到 這種問(wèn)題。

雖然主項(xiàng)目和遠(yuǎn)程組件使用的 Vue 方法都是一樣的，但由于各自的 Vue 上下文不一樣，導(dǎo)致主項(xiàng)目無(wú)法正常使用遠(yuǎn)程組件。

以上兩個(gè)問(wèn)題困擾了我一天的時(shí)間，但是睡醒一覺(jué)后，終于想到了如何解決這兩個(gè)問(wèn)題。首先在瀏覽器上不能直接使用 import { reactive } from 'vue' 這種語(yǔ)句，那把它改成 const { reactive } = Vue 就能解決這個(gè)問(wèn)題了。至于第二個(gè)問(wèn)題，打包時(shí)不把依賴打在一起，而是在 main.js 文件中直接把整個(gè) Vue 引進(jìn)來(lái)：

import * as Vue from 'vue'window.Vue = Vue

這樣就能確保主項(xiàng)目和遠(yuǎn)程組件使用的是同一個(gè) Vue 上下文。

為了解決代碼轉(zhuǎn)換問(wèn)題，我寫了一個(gè) rollup-plugin-import-to-const 插件（支持 rollup、vite），打包 esm 組件時(shí)，它會(huì)自動(dòng)的把 import { reactive } from 'vue' 轉(zhuǎn)換成 const { reactive } = Vue 。

至此，就可以在主項(xiàng)目中加載遠(yuǎn)程 esm 組件了：

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

其實(shí)只要能解決上面的兩個(gè)問(wèn)題，不管是 esm 還是 umd、cjs 等格式，都能夠?qū)崿F(xiàn)加載遠(yuǎn)程組件的方案。比如換成 umd 的格式來(lái)打包組件，就不需要引入 rollup 插件去轉(zhuǎn)換代碼了，并且還能支持 webpack。唯一要做的只是在 main.js 上把 Vue 全引進(jìn)來(lái)掛到 window 下。

import * as Vue from 'vue'window.Vue = Vue

總結(jié)

遠(yuǎn)程組件的方案其實(shí)不止上面兩種，比如還有直接加載 .vue 文件的方案，有個(gè)現(xiàn)成的 vue3-sfc-loader 插件能用。 一般來(lái)說(shuō)，加載遠(yuǎn)程組件的應(yīng)用場(chǎng)景比較少，所以網(wǎng)上能搜到的討論也比較少。目前比較常見的應(yīng)用場(chǎng)景應(yīng)該就是在低代碼平臺(tái)中加載遠(yuǎn)程組件了。

Vue 加載遠(yuǎn)程組件的解決方案
原文鏈接：https://juejin.cn/post/7258850748149219384