在 Excel Office 加載項中使用 takepane.js 時遇到問題

Question

編輯：顯然，我誤解了 Office 加載項的工作原理。 請參閱下面的評論，了解我是如何解決問題的。

這個周末我能夠得到一個 Excel 辦公室加載項。 該加載項是使用 yeoman 生成器創建的。 我正在 Excel 桌面 (PC) 和 Excel 在線測試此加載項。

該加載項當前以以下結構運行：

1. 插件內容上傳到Github頁
2. manifest.xml 已更新，將 localhost:3000 替換為 github 頁面站點。
3. manifest.xml 已上傳到我的開發人員帳戶的 Microsoft 365 管理中心的集成應用程序頁面。

為了啟動並運行加載項，我必須做一些事情：

1. 我必須將任務窗格目錄 (/src/takepane/) 中的文件移動到根目錄中。
2. 我不得不在 takespane.html 文件中使用<script>標簽並在那里執行 javascript 代碼。

如果我不將 taskpane.html 文件移動到根目錄，當我嘗試在 Excel Online 或 Excel 桌面加載加載項時，一旦它被上傳到 Github 頁面，我就會收到 404 錯誤。

我已嘗試多次嘗試引用 taskpane.js 以使加載項引用該文件中的代碼。 我已經嘗試創建一個<script>標記來引用來自 takepane.html 的這個文件。 我研究了 webpack.config.js 和 manifest.xml 文件中不斷變化的值。 我所有的嘗試都沒有成功。

我想知道是否有人知道我為什么會遇到這些問題。 或者可以指出我應該做的正確方向。 我感謝任何建議。 我很樂意提供任何請求的代碼。

Answer 1

您需要更新可用於構建新加載項項目的 yeoman 生成器。 新生成的加載項使用Webpack作為捆綁器。 在這種情況下，您的文件位於何處並不重要。

Answer 2

經過大量的反復試驗，我想通了。 事實證明，我對 Office 加載項的工作方式感到困惑。 我應該上傳加載項項目的分發，而不是上傳加載項項目。 這對於傳統開發人員/web 開發人員來說可能是顯而易見的。 但我是一名 Excel 開發人員，所以這對我來說並不明顯。 有很多材料討論如何創建和運行本地加載項。 但是沒有多少人談論如何上傳和分發這樣的插件。 所以這就是我必須做的才能使事情正常進行：

1. 在 Office 加載項項目的 /src/takepane 目錄中對takepane.js進行更改。
2. 使用將上傳文件的webpack.config.js更新 webpack.config.js 中的urlProd常量（我為此使用了 Github 頁）
3. 完成並保存該更新后，在 Office 加載項的目錄中運行npm run build 。 這將在您的 Office 加載項文件夾中創建 dist 目錄。
4. 將文件從 dist 目錄上傳到您之前分配給urlProd常量的 URL。
5. 將 dist 目錄中的manifest.prod.xml文件（或向此文件提供 URL）上傳到 Microsoft 365 管理中心。

我上面列出的路線可能很棘手。 使用 Azure 指南更容易 imo。 您可以在此處查看使用該指南

延遲一段時間后，加載項將顯示。 對我來說，加載項在 Excel Online 中運行。 但是我遇到了 Excel 桌面的證書問題。 所以接下來我會調查一下。