webpack 如何根据环境(测试、QA、开发)使模块联合远程URL动态化?

siv3szwd  于 2023-03-30  发布在  Webpack
关注(0)|答案(1)|浏览(138)

我已经建立了一个容器应用程序,它消耗了几个远程应用程序。问题是,我需要远程url是动态的,基于它们所处的环境(测试、开发、QA).正如你可以看到我的车辆远程url是硬编码指向dev.我需要这个URL更新的基础上的环境.我想使用env变量,如果可能的话.我可以'我找不到一个明确的答案,希望有人能给我一些建议。

const devConfig = {
  mode: "development",
  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        vehicle:
          "vehicle@https://vehicle-mf-dev.com/remoteEntry.js",
      }
          exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ],
};
wbgh16ku

wbgh16ku1#

你应该用环境变量,然后把你的环境换成你的环境变量,就是说:
1-创建环境变量。可以使用**.env文件**,也可以创建环境变量。例如,在UNIX系统中可以执行export API=https://vehicle-mf-dev.com
更多信息:https://nodejs.dev/en/learn/how-to-read-environment-variables-from-nodejs/
2-然后你可以在你的代码中使用这个环境变量:

const devConfig = {
  mode: "development",
  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        vehicle:
          `vehicle@${process.env.API}/remoteEntry.js`,
      }
          exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ],
};

相关问题