在 Excel Office 加载项中使用 takepane.js 时遇到问题
Having trouble using takepane.js in an Excel Office Add-in
编辑：显然，我误解了 Office 加载项的工作原理。请在下面查看我的评论，了解我是如何解决问题的。
我在这个周末得到了一个 Excel office 加载项。该加载项是使用 yeoman 生成器创建的。我正在 Excel 桌面 (PC) 和 Excel 在线测试此插件。
加载项当前在以下结构中运行：
- 加载项内容已上传到 Github 个页面
- manifest.xml 已更新，将 localhost:3000 替换为
github 页面站点。
- manifest.xml 已上传至集成应用页面
我的开发者帐户的 Microsoft 365 管理中心。
为了启动加载项 运行 我必须做一些事情：
- 我必须移动任务窗格目录中的文件 (/src/takepane/)
进入根目录。
- 我必须在 takespane.html 文件中使用
<script> 标记并在那里执行 javascript 代码。
如果我不将 taskpane.html 文件移动到根目录，当我尝试在 Excel Online 或 Excel 中加载加载项时出现 404 错误上传到 Github 页面后桌面。
我已多次尝试引用 taskpane.js 以获取加载项以引用该文件中的代码。我已经尝试创建一个 <script> 标签来引用来自 takepane.html 的这个文件。我研究了 webpack.config.js 和 manifest.xml 文件中不断变化的值。我所有的尝试都没有成功。
我想知道是否有人知道我遇到这些问题的原因。或者可以指出我应该做的正确方向。我感谢任何建议。我很乐意提供任何请求的代码。
您需要更新可用于构建新 add-in 项目的 yeoman 生成器。新生成的 add-in 使用 Webpack 作为打包器。在这种情况下，您的文件位于何处并不重要。
经过大量的反复试验，我想通了。事实证明，我对 Office Add-ins 的工作方式感到困惑。我没有上传 add-in 项目，而是应该上传 add-in 项目的 distribution。这对于传统开发人员/Web 开发人员来说可能是显而易见的。但我是一名 Excel 开发人员，所以这对我来说并不明显。有很多 material 讨论如何创建和 运行 本地 add-in。但是没有多少人谈论如何上传和分发这样的 add-in。所以这就是我必须做的事情：
- 在 Office add-in 项目的 /src/takepane 目录中对
takepane.js 进行更改。
- 将
webpack.config.js 中的 urlProd 常量更新为上传文件的 URL（我为此使用了 Github 页）
- 完成并保存更新后，运行
npm run build 在 Office Add-in 的目录中。这将在您的 Office add-in 文件夹中创建 dist 目录。
- 将文件从 dist 目录上传到您之前分配给
urlProd 常量的 URL。
- 将 dist 目录中的
manifest.prod.xml 文件（或向此文件提供 URL）上传到 Microsoft 365 管理中心。
我上面列出的路线可能很棘手。 imo 使用 Azure 指南更容易。您可以考虑使用该指南 here
延迟一段时间后，add-in 将显示。对我来说，add-in 在 Excel 在线工作。但是 Excel 桌面出现证书问题。所以接下来我会调查一下。
编辑：显然，我误解了 Office 加载项的工作原理。请在下面查看我的评论，了解我是如何解决问题的。
我在这个周末得到了一个 Excel office 加载项。该加载项是使用 yeoman 生成器创建的。我正在 Excel 桌面 (PC) 和 Excel 在线测试此插件。
加载项当前在以下结构中运行：
- 加载项内容已上传到 Github 个页面
- manifest.xml 已更新，将 localhost:3000 替换为 github 页面站点。
- manifest.xml 已上传至集成应用页面 我的开发者帐户的 Microsoft 365 管理中心。
为了启动加载项 运行 我必须做一些事情：
- 我必须移动任务窗格目录中的文件 (/src/takepane/) 进入根目录。
- 我必须在 takespane.html 文件中使用
<script>标记并在那里执行 javascript 代码。
如果我不将 taskpane.html 文件移动到根目录，当我尝试在 Excel Online 或 Excel 中加载加载项时出现 404 错误上传到 Github 页面后桌面。
我已多次尝试引用 taskpane.js 以获取加载项以引用该文件中的代码。我已经尝试创建一个 <script> 标签来引用来自 takepane.html 的这个文件。我研究了 webpack.config.js 和 manifest.xml 文件中不断变化的值。我所有的尝试都没有成功。
我想知道是否有人知道我遇到这些问题的原因。或者可以指出我应该做的正确方向。我感谢任何建议。我很乐意提供任何请求的代码。
您需要更新可用于构建新 add-in 项目的 yeoman 生成器。新生成的 add-in 使用 Webpack 作为打包器。在这种情况下，您的文件位于何处并不重要。
经过大量的反复试验，我想通了。事实证明，我对 Office Add-ins 的工作方式感到困惑。我没有上传 add-in 项目，而是应该上传 add-in 项目的 distribution。这对于传统开发人员/Web 开发人员来说可能是显而易见的。但我是一名 Excel 开发人员，所以这对我来说并不明显。有很多 material 讨论如何创建和 运行 本地 add-in。但是没有多少人谈论如何上传和分发这样的 add-in。所以这就是我必须做的事情：
- 在 Office add-in 项目的 /src/takepane 目录中对
takepane.js进行更改。 - 将
webpack.config.js中的urlProd常量更新为上传文件的 URL（我为此使用了 Github 页） - 完成并保存更新后，运行
npm run build在 Office Add-in 的目录中。这将在您的 Office add-in 文件夹中创建 dist 目录。 - 将文件从 dist 目录上传到您之前分配给
urlProd常量的 URL。 - 将 dist 目录中的
manifest.prod.xml文件（或向此文件提供 URL）上传到 Microsoft 365 管理中心。
我上面列出的路线可能很棘手。 imo 使用 Azure 指南更容易。您可以考虑使用该指南 here
延迟一段时间后，add-in 将显示。对我来说，add-in 在 Excel 在线工作。但是 Excel 桌面出现证书问题。所以接下来我会调查一下。