基于Webpack5 Federated Module的微服务框架

Posted 2021-10-05 anYun

本文章主要围绕emp使用进行介绍，主要记录使用emp框架一些搭建过程

准备工作

emp 仓库链接: https://github.com/efoxTeam/e...
可根据 README 完成初步框架的创建创建工程 anyun-main 选择模版 react

基础调整

由于emp默认创建的react工程版本是16，所以需要删除默认包，重新安装最新版本备注：不想升级可忽略此步骤

1.yarn remove react react-dom react-router-dom
2.yarn add react react-dom react-router-dom
3.yarn remove @types/react @types/react-dom  @types/react-router-dom
4.yarn add -D @types/react @types/react-dom  @types/react-router-dom

• 打开emp-config.js文件

shared: {
- react: {eager: true, singleton: true, requiredVersion: \'^16.13.1\'},
+ react: {eager: true, singleton: true, requiredVersion: \'^17.0.1\'},
- \'react-dom\': {eager: true, singleton: true, requiredVersion: \'^16.13.1\'},
+ \'react-dom\': {eager: true, singleton: true, requiredVersion: \'^17.0.1\'},
- \'react-router-dom\': {requiredVersion: \'^5.1.2\'},
+ \'react-router-dom\': {requiredVersion: \'^5.2.0\'},
},

其他

项目中如果使用了@别名，需要在emp-config.js增加以下代码

config.resolve.alias.set(\'@\', path.resolve(\'./\', \'src\'))

在webpack5中是默认没有node的core module，如果使用了这些核心库。需要在emp-config.js增加这些核心库，代码如下：

config.resolve.alias
    .set(\'zlib\',"browserify-zlib")
    .set(\'assert\', "assert")
    .set(\'buffer\', "buffer")
    .set(\'util\', "util")
    .set(\'stream\', "stream-browserify")
    .set(\'timers\', "timers-browserify")

设置source-map

config.devtool(empEnv === \'dev\' ? \'nosources-source-map\' : false)

相关文章

EMP微前端-带你快速入门
Webpack Module Federation属性介绍