Vue 加載遠程組件的解決方案

背景

最近的項目有一個加載遠程組件的需求。基於此我對 Vue 加載遠程組件的方案進行了研究，並且整理了兩個可行的解決方案。

HTML 文件 + umd 組件

這個方案是最簡單、最容易實現的。組件以 umd 的格式進行打包，然後在 HTML 文件中直接使用。

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

但是這個方案不適合在大型項目中使用，效率比較低。

Vue 工程項目 + esm /umd 組件

Vue 工程項目 + esm /umd 組件是我目前在使用的方案，但是在研究的過程中遇到了兩個問題，逐一解決後，才把這個方案趟通了。

第一個問題 Relative references must start with either "/", "./", or "../"

由於我們的項目不需要兼容 IE，所以打包組件採用的是 esm 格式。打包後的組件源碼如下：

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

然後在主項目中進行引用：

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

在動態導入遠程組件到項目時，提示報錯 Relative references must start with either "/", "./", or "../"。這是因爲在瀏覽器中不支持以 import { reactive } from 'vue' 的方式進行導入，得把 'vue' 改成 https://..../vue.js 或者 './vue.js' 的形式纔可以。平時我們這樣用沒問題是因爲有 vite、webpack 等構建工具幫忙解決了這個問題。

第二個問題 Vue 上下文環境不同

產生上面的問題是因爲要引入依賴，如果打包組件時把相關依賴都打在一起，那不就沒有 import 語句了。結果試了一下還是不行，因爲當前的 Vue 主項目和打包好的 Vue 組件存在兩個不同的 Vue 上下文。導致在加載組件時報錯，比如提示 xxx 變量找不到 這種問題。

雖然主項目和遠程組件使用的 Vue 方法都是一樣的，但由於各自的 Vue 上下文不一樣，導致主項目無法正常使用遠程組件。

以上兩個問題困擾了我一天的時間，但是睡醒一覺後，終於想到了如何解決這兩個問題。首先在瀏覽器上不能直接使用 import { reactive } from 'vue' 這種語句，那把它改成 const { reactive } = Vue 就能解決這個問題了。至於第二個問題，打包時不把依賴打在一起，而是在 main.js 文件中直接把整個 Vue 引進來：

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

這樣就能確保主項目和遠程組件使用的是同一個 Vue 上下文。

爲了解決代碼轉換問題，我寫了一個 rollup-plugin-import-to-const[1] 插件（支持 rollup、vite），打包 esm 組件時，它會自動的把 import { reactive } from 'vue' 轉換成 const { reactive } = Vue 。

至此，就可以在主項目中加載遠程 esm 組件了：

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

其實只要能解決上面的兩個問題，不管是 esm 還是 umd、cjs 等格式，都能夠實現加載遠程組件的方案。比如換成 umd 的格式來打包組件，就不需要引入 rollup 插件去轉換代碼了，並且還能支持 webpack。唯一要做的只是在 main.js 上把 Vue 全引進來掛到 window 下。

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

總結

遠程組件的方案其實不止上面兩種，比如還有直接加載 .vue 文件的方案，有個現成的 vue3-sfc-loader[2] 插件能用。 一般來說，加載遠程組件的應用場景比較少，所以網上能搜到的討論也比較少。目前比較常見的應用場景應該就是在低代碼平臺中加載遠程組件了。

References

[1] rollup-plugin-import-to-const: https://github.com/woai3c/rollup-plugin-import-to-const
[2] vue3-sfc-loader: https://github.com/FranckFreiburger/vue3-sfc-loader

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/xmxJ8AXWlPw-Cd0hG4BI7w

猜你喜歡