如何在single-spa Angular微前端中共享ES模块格式的@myorg/mylib

1. 配置SystemJS以兼容ES模块加载 #

SystemJS默认对ES模块的处理需要显式声明，修改index.html中的SystemJS配置和importmap：

• 确保使用支持ES模块的SystemJS 6.x版本
• 通过SystemJS的packages配置标记@myorg/mylib为ES模块，同时在importmap中指定正确的资源路径

示例配置：

<!-- 加载SystemJS及必要扩展 -->
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/extras/amd.js"></script>

<!-- SystemJS核心配置 -->
<script>
  System.config({
    packages: {
      '@myorg/mylib': {
        format: 'esm',
        defaultExtension: 'mjs'
      }
    }
  });
</script>

<!-- SystemJS Import Map -->
<script type="systemjs-importmap">
  {
    "imports": {
      "@myorg/mylib": "http://your-host-path/@myorg/mylib/index.mjs",
      "@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@16.0.0/fesm2022/core.mjs",
      "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@16.0.0/fesm2022/common.mjs"
      // 按需添加其他共享依赖映射
    }
  }
</script>

2. 修正消费端Webpack externals配置 #

确保Angular微前端的Webpack配置中，@myorg/mylib的external格式符合single-spa要求：

// 微前端的webpack配置文件（可通过custom-webpack插件引入）
module.exports = {
  externals: {
    '@myorg/mylib': 'js @myorg/mylib', // 前缀`js `标记为JS模块类型
    // 其他共享依赖的external配置...
  }
};

3. 校验组件库构建输出 #

检查@myorg/mylib的Angular构建配置：

• 确认angular.json的build选项中，format包含esm2022或esm
• 确保构建产物的入口文件（如index.mjs）正确导出共享组件：

// @myorg/mylib/index.mjs
export { MyButtonComponent } from './lib/my-button/my-button.component';
export { MyLibModule } from './lib/my-lib.module';

4. 调试验证 #

• 打开浏览器Network面板，确认@myorg/mylib/index.mjs及依赖资源成功加载
• 检查Console面板，若存在依赖缺失，及时在importmap中补充对应映射

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