如何在Webpack编译阶段配置API客户端，然后将其作为全局变量提供给前端代码

Question

TLDR：：如何在执行webpack.config.js的过程中配置库并将其提供给捆绑软件。

我正在尝试做的事情：

我正在尝试构建一个工具来帮助我的团队的前端代码遵守OpenApi Specs（或swagger.json）。我已经开始进行项目here。我将其命名为Hakuna Matata，因为它并不意味着担心，但是现在它是Hakuna Ma-nada。

主要功能：

1. 开发人员可以用来调用API的Javascript客户端。 （例如，api.addPet({...})而非axios.post('/api/pets/', {...})
2. JavaScript客户端模拟api响应以进行单元测试。
3. JavaScript客户端可确保单元测试和代码符合API规范。
4. 在部署过程中运行API运行状况检查。

有了这种转折：

随着我们的API随时间变化和适应，该API可能存在多种状态。（版本迭代，开发，生产，功能分支等）我希望能够指出我的前端代码基于编译环境的正确API URL。为此，我在项目的根目录中添加了一个config.json文件，看起来像this。

我现在在哪里：

在编译时，我读取了config.json文件，然后根据环境选择要使用的API URL。 （working here）（关键是将此配置文件 not 放入Webpack捆绑包，因为它将公开我们的非生产API网址）如果API规范是URL，则同步（我知道，构建时间会很长，但这只能在初始编译时发生），请从URL中读取规范。

顺便说一句，我已经读过this answer好几次了，它没有涵盖我想要做的事情。

然后我们有几个选择：

选项1：（这是我的首选方法，但无法使其正常工作。） 按照规范，将其读入swagger-client，并使用与ProvidePlugin相同的方法将客户端添加为全局变量。 （not working here）

ProvidePlugin仅将libraryUsage替换为require('package')，并且看来webpack.config.js中的require（）。cache在捆绑包中不可用，因此捆绑包尝试包含{{3 }}，其中使用{em>不能的fs和sync-request。

选项2：（有效，但不受欢迎） 遵循规范，使用DefinePlugin将其存储在全局常量中。然后在条目index.js中使用全局常量来创建客户端，并使用webpack的global.功能来设置全局变量。我有这个工作，但是我不喜欢它。

我不喜欢这个选项，因为它意味着代码可以在index.js编译的任何时候运行。

所以，这是一个问题：

我可以在webpack.config.js期间配置一个库，然后使用DefinePlugin或ProvidePlugin之类的东西将单例传递到分发包中吗？

例如，以下代码不起作用，但是我想做类似的事情。

webpack.config.js：

const HakunaMatata = require('hakuna-matata');
const ApiClient = new HakunaMatata({
  config: process.env.NODE_ENV === "production" ? "option1" : "option2"
});
...
module.exports = {
  ...
  plugins: [
    webpack.ProvidePlugin({api: ApiClient}),
    // or
    webpack.DefinePlugin({api: ApiClient}),
  ]}

然后在文件中使用该客户端：

entry.js：

api.listPets().then(()=>console.log)