微前端架构下的模块如何共享？

在微前端架构下，主子模块是独立的，这样打包就会产生重复代码。为了解决这个问题，有几种共享代码的方式：

一、子应用引入主应用代码：

1、这种方式最简单，直接在子应用中引入主应用的代码，然后在子应用中使用。
2、优点是实现简单，缺点是主应用代码会耦合到子应用中，不利于子应用的独立性。

二、使用模块联合（Module Federation）：

1、模块联合是一种新的共享代码方式，它允许在多个应用程序之间共享代码。
2、优点是代码共享更加灵活，可以按需加载模块，缺点是实现复杂，需要对Webpack进行一些额外的配置。

三、使用微前端框架：

1、使用微前端框架可以简化微前端的开发，框架已经内置了代码共享的解决方案。
2、优点是实现简单，缺点是灵活性较差，需要遵循框架的规定。

根据实际情况选择合适的代码共享方式，可以有效减少重复代码，提高开发效率。

下面是一些具体的例子：

• 在子应用中引入主应用代码：

// 子应用代码
import { Button } from '@main-app/ui';

const App = () => {
  return (
    <div>
      <Button>Button</Button>
    </div>
  );
};

export default App;

• 使用模块联合：

// 主应用代码
export function add(a, b) {
  return a + b;
}

// 子应用代码
import { add } from '@main-app/shared';

const App = () => {
  const result = add(1, 2);
  return (
    <div>
      <p>{result}</p>
    </div>
  );
};

export default App;

• 使用微前端框架：

// 主应用代码
import { createApp } from '@micro-app/framework';

const app = createApp({
  name: 'main-app',
  entry: '//localhost:3000/main.js',
  container: '#main-app-container',
});

app.mount();

// 子应用代码
import { createApp } from '@micro-app/framework';

const app = createApp({
  name: 'sub-app',
  entry: '//localhost:4000/sub.js',
  container: '#sub-app-container',
});

app.mount();

以上只是几种常见的代码共享方式，还有其他方式可以实现代码共享。