根據 Office 插件的構建設置變量的值（條件變量）

Question

我使用 Office.js 開發了一個 Word Office 插件。 插件工作正常，但現在我想將插件部署到 Acc。 環境。 當然，在部署 AddIn 時，必須更改 de Manifest 中使用的 UR，正如我在此處閱讀的那樣。 這必須手動完成。

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 運行構建時，taskpane.js 仍然包含 dev-url。

我能以某種方式使這個動態嗎？ 我的意思是，當我開發和測試 URL 時還可以，但是當我部署和運行npm 時，運行 build commando 會自動將 dev-url 替換為 ACC 或 prod 之類的東西，因此 ZE6B391A8D2C4D45902A23A 看起來像

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

或者

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

有什么建議么？

Answer 1

好的，經過一天的研究，我找不到答案，我和我的同事一起制定了解決方案。 我必須注意這個插件只在我們的組織內使用，所以安全性是一個較小的問題。 另外值得一提的是，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 的頂部（它只是代碼的一部分）。 我還在插件部分更改了 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 文件。 如果它找到該文件，我將根據應用程序的構建方式替換它。 即開發、接受或生產。

在 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"} 用於開發/測試 (config.development.json)

這個解決方案對我有用。 現在我可以針對我需要的環境進行構建，而無需手動更改我的 taskpane.ts 文件。