如何在single-spa的importmap中使用环境变量？

首先明确：浏览器环境不存在Node.js的process对象，直接写process.env.URL_ROOT肯定会报错，得把环境变量转换成浏览器能识别的形式，下面是几种可行的实现方式：

方式一：动态生成importmap脚本 #

先在HTML中定义全局环境变量（本地开发可直接写死，生产环境可通过构建工具注入），再用JS动态创建importmap标签：

<!-- 先定义全局环境变量 -->
<script>
  // 生产环境可通过构建工具替换此处内容
  window.appEnv = {
    URL_ROOT: "//localhost:9000"
  };
</script>

<!-- 动态生成importmap -->
<script>
  const importMapContent = {
    imports: {
      "polyglot-mf-root-config": `${window.appEnv.URL_ROOT}/polyglot-mf-root-config.js`
    }
  };

  const importMapScript = document.createElement('script');
  importMapScript.type = 'importmap';
  importMapScript.textContent = JSON.stringify(importMapContent);
  document.head.appendChild(importMapScript);
</script>

这种方式无需复杂构建配置，本地和生产环境都能适配，只需替换全局变量里的URL_ROOT值即可。

方式二：用构建工具在编译阶段替换环境变量 #

如果用Webpack、Vite这类构建工具，可直接在HTML模板中使用工具支持的环境变量语法，构建时会自动替换成实际值：

Webpack示例 #

1. 在项目根目录.env文件定义环境变量：

URL_ROOT=//localhost:9000

2. 配置html-webpack-plugin注入环境变量到模板：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
require('dotenv').config();

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: 'body',
      templateParameters: {
        URL_ROOT: process.env.URL_ROOT
      }
    })
  ]
};

3. 在HTML模板中使用模板语法：

<script type="importmap">
{
  "imports": {
    "polyglot-mf-root-config": "<%= URL_ROOT %>/polyglot-mf-root-config.js"
  }
}
</script>

Vite示例 #

1. 在.env.local中定义带VITE_前缀的环境变量（Vite仅注入该前缀变量）：

VITE_URL_ROOT=//localhost:9000

2. 在HTML模板中直接使用：

<script type="importmap">
{
  "imports": {
    "polyglot-mf-root-config": "${import.meta.env.VITE_URL_ROOT}/polyglot-mf-root-config.js"
  }
}
</script>

Vite会在构建或开发时自动替换变量值。

方式三：服务器端模板注入 #

如果项目是服务器端渲染（如Express），可在服务端读取环境变量，渲染HTML时插入到importmap中：

// Express示例
app.get('/', (req, res) => {
  const urlRoot = process.env.URL_ROOT || '//localhost:9000';
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <script type="importmap">
        {
          "imports": {
            "polyglot-mf-root-config": "${urlRoot}/polyglot-mf-root-config.js"
          }
        }
        </script>
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>
  `);
});

内容的提问来源于stack exchange，提问作者Step