多个importmap.Json在单个spa中用于不同环境

Question

我正在将现有项目转换为单个spa。这个应用程序支持不同的环境——dev,qa,prod。我的要求是根据环境使用不同的导入映射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="https://cdn.cloudfront.net/import-map.json"></script>
<% } %>

在这里，我想使用多个else if条件来加载不同的import-map。Json from remote cdn.

有人能帮我实现这个吗?

Answer 1

您可以在根配置中实现这一点，因为它只是一个由Webpack处理的ejs模板。如果你偷看你的根配置的webpack.config.js你会发现isLocal派生在那里。你可以添加自己的templateParameters那里。最后，import-map-deployer是管理多个导入映射的有用工具，它适用于多个部署环境。