根据 Office 加载项（条件变量）的构建设置变量的值

Question

我使用 Office.js 开发了一个 Word Office 插件。 AddIn 工作正常，但现在我想将 AddIn 部署到 Acc。环境。当然，在部署 AddIn 时必须更改 de Manifest 中使用的 UR，因为我可以阅读 here。这必须手动完成。

Office AddIn 包含一个 taskpane.js 文件，在这个文件中，我调用了 API 的两个端点。此 API 的 URL 存储在本地变量中。

let serverUrl = `https://dev.myorganisation.com/api/atlas`;
let projectUrl = `${serverUrl}/projects/`;
let wsReGeBo = `${serverUrl}/wms`;
let mapUrl = `${serverUrl}/printconfig/printmap/[title]/[scale]/[lng]`;

现在我的问题是当我想部署插件并启动 npm 运行 build 时，taskpane.js 仍然包含 dev-url.

我能以某种方式让它变得动态吗？我的意思是当我开发和测试时 URL 没问题，但是当我部署和运行时 npm 运行 build commando 会自动替换 dev- url 与 ACC 或 prod 之类的东西所以 URL 看起来像

let serverUrl = `https://acc.myorganisation.com/api/atlas`;

或

let serverUrl = `https://prod.myorganisation.com/api/atlas`;

有什么建议吗？

Answer 1

好吧，经过一天的研究，我找不到答案，我和我的一位同事想出了一个解决方案。我必须指出，此 AddIn 仅在我们的组织内使用，因此安全性是一个较小的问题。还值得一提的是，AddIn 是使用 Yeoman 创建的。

我们提出的解决方案使用 配置文件，其中存储了 API-url。我有 3 个配置文件，一个用于开发，一个用于验收，一个用于生产。

config.developer.json
config.acceptation.json
config.json（这是生产配置）

根据项目的构建方式，这些配置之一用于读取。我将 taskpane.ts 改成了 config.file.

import  env from "../config.json";

let serverUrl = `${env["api-url"]}/api/atlas`;
let projectUrl = `${serverUrl}/projects/`;

这段代码在我的taskpane.ts的顶部（只是部分代码）。我还更改了 de plugin-section 中的 webpack.config.js 我添加了下一段代码：

new webpack.NormalModuleReplacementPlugin(/(\/|\)(config\.json)$/, resource => {
        const fullpath = path.parse(path.join(resource.context, resource.request));
        const configOrder = [
          `config.${configPostfix}.json`,
          'config.json',
        ];
        for (const name of configOrder) {
          const configPath = path.join(fullpath.dir, name);
          if (fs.existsSync(configPath)) {
            resource.request = configPath;
            break;
          }
        }
      }),

它的作用是查找 config.json 文件。如果找到该文件，我将根据应用程序的构建方式替换它。 IE。开发、验收或生产。

在 webpack.config 的 module.export 正下方，我有以下几行：

const dev = options.mode === "development";
const buildType = dev ? "dev" : "prod";
const configPostfix = options.acc ? 'acceptation' : options.mode;

默认情况下存在前两行。我添加的第三个是为了使用创建在插件部分中使用的 van configPostfix。

我做的最后一件事是，在 package.json 的脚本部分添加了行：

"build:acc": "webpack -p --mode production --https false --acc"

config.json 文件的内容如下：

{"api-url":"https://example.domain.com"} 用于生产 (config.json)
{"api-url":"https://example-acc.domain.com"} 接受 (config.acceptation.json)
{"api-url":"https://example-dev.domain.com"} development/test (config.development.json)

这个解决方案适合我。现在我可以针对我需要的环境进行构建，而无需手动更改我的 taskpane.ts 文件。

根据 Office 加载项（条件变量）的构建设置变量的值

Set value of a variable depending on build for an Office AddIn (conditional var)

build

office-addins

dynamic-variables

office-js