single-spa项目如何为dev/qa/prod等不同环境加载对应importmap.json

实现方案 #

你用的是服务端模板语法（类似EJS、Nunjucks），只需要先确保服务端已经将当前环境标识注入到模板上下文，比如添加*env*变量，取值为dev/qa/prod，然后直接扩展条件分支即可：

<% if (isLocal) { %>
<script type="systemjs-importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "@ppm-canvas/root-config": "//localhost:9000/ppm-canvas-root-config.js",
    "@ppm-canvas/match-upload": "//localhost:8081/ppm-canvas-match-upload.js"
  }
}
</script>
<% } else if (env === 'dev') { %>
<script type="systemjs-importmap" src="https://dev-cdn.example.com/import-map.json"></script>
<% } else if (env === 'qa') { %>
<script type="systemjs-importmap" src="https://qa-cdn.example.com/import-map.json"></script>
<% } else if (env === 'prod') { %>
<script type="systemjs-importmap" src="https://cdn.cloudfront.net/import-map.json"></script>
<% } %>

更易维护的优化方案 #

如果后续环境还会新增，推荐提前定义环境和importmap地址的映射关系，避免嵌套过多条件分支：

<% 
// 预先定义环境与importmap地址的映射
const envImportMapMap = {
  dev: 'https://dev-cdn.example.com/import-map.json',
  qa: 'https://qa-cdn.example.com/import-map.json',
  prod: 'https://cdn.cloudfront.net/import-map.json'
}
%>

<% if (isLocal) { %>
<script type="systemjs-importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "@ppm-canvas/root-config": "//localhost:9000/ppm-canvas-root-config.js",
    "@ppm-canvas/match-upload": "//localhost:8081/ppm-canvas-match-upload.js"
  }
}
</script>
<% } else { %>
<script type="systemjs-importmap" src="<%= envImportMapMap[env] %>"></script>
<% } %>

注意事项 #

• 确保服务端注入的*env*变量取值和映射对象里的key完全匹配，避免出现匹配不到返回undefined的问题
• 如果需要规避CDN资源缓存问题，可以给importmap地址增加版本号或哈希后缀，比如https://dev-cdn.example.com/import-map.json?v=20240520
• 本地开发环境的importmap新增依赖后，记得同步更新各环境远程importmap的配置，避免线上出现依赖缺失问题

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