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


theme: condensed-night-purple

收益:

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

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

升级之路:

看过umi官方的 https://umijs.org/docs/introduce/upgrade-to-umi-4 升级文档之后着手开始升级。

首先删除 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 替换

1b4e1024cc9e45208816fdaa073fc531_tplv-k3u1fbpfcp-watermark.jpg

配置层迁移

defineConfig

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

// 删除
webpack5: {}

image.png

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

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

image.png

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

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

image.png

image.png
按照如图设置

image.png

image.png

image.png

排查所有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",
}

参考:

https://umijs.org/docs/introduce/upgrade-to-umi-4

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容