umi3 升级max(umi4)+pnpm 踩坑之路

收益：

1. 编译开发的时候比较顺畅了，页面明显不卡顿了，启动基本上秒开

2. 打包部署时间缩短2分钟左右

升级之路：

看过umi官方的 umijs.org/docs/introd… 升级文档之后着手开始升级。

首先删除 package-lock.json, pnpm-lock.yaml

package.json 需要移除的package, umijs等相关插件

@umijs/plugin-esbuild
@umijs/route-utils
@umijs/preset-react
umi

需要添加的package.json

"@types/node": "^18.11.11",
"@types/react": "^18.0.26",
"@umijs/max": "4.0.40"

tsconfig.json配置

"compilerOptions":{
     "types": ["node","react"]
 }

搭配pnpm的话可以看我这篇文章 pnpm 项目最佳实践 执行pnpm i

启动命令

max 将一些项目前置操作放到了 setup 命令中，如 umi@3 中的 umi g tmp 等命令，需要使用 max setup 替换

配置层迁移

defineConfig

// 添加配置
dva:{},
initialState: {},
model: {},
access: {},
targets:{},
hash: true,
historyWithQuery:{},
fastRefresh: true,
// 需要添加的插件
plugins:[],
// 此配置必须添加，不然打包的时候antd有些样式无法正常打包
antd: {}

// 删除
webpack5: {}

hash 官方竟然默认是false, 导致我部署线上环境后, 访问资源有问题。所以别忘了设置为true

antd: {} 必须设置，不然打包生成样式会缺少antd样式

historyWithQuery 官方竟然默认是false, 导致history.push({ pathname: '/', query: { id } }) 跳转页面不会携带id，所以我们一定要设置上去

max 中将 react-router@5 升级到 react-router@6，所以路由相关的一些 api 存在着使用上的差异。 layouts 中的文件

按照如图设置

排查所有react 组件, 没有react的一定要引入, 开发环境没问题，结果部署线上的话，就会报React找不到

从umi引入的 history.goBack 替换成 history.go(-1) 没有goBack方法了

umi history.listen location 已经改了, 改成这种方式了，并且初始化的时候不会触发listen事件了, 所以在监听的时候一定要注意，这是个很大的不兼容更新

history.listen(({ location: { pathname, query } }) => {
        
})

vite启用方式

const viteConfig = {}
const isVite = process.env.vite === '1'
if (isVite) {
  viteConfig.vite = {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost'
      }
    }
  }
  if(process.env.force === '1') {
    viteConfig.vite.optimizeDeps = {
      force: true,
    }
  }
}

defineConfig({
...viteConfig
})

"script":{
    "vite": "vite=1 DID_YOU_KNOW=none HTTPS=1 max dev",
    "vite:force": "vite=1 force=1 DID_YOU_KNOW=none HTTPS=1 max dev",
}

参考：

umijs.org/docs/introd…