umi3升级到umi4踩坑记录

前言

最近公司开启新项目，项目架构直接从老项目移过来，但是老项目用的是umi3，我想升级成umi4。

前期文档阅读准备

我主要是结合下面2篇文章+控制台报错见招拆招完成升级

1. 掘金作者心得

juejin.cn/post/718520…

2. 官网教程

umijs.org/docs/introd…

升级步骤

1. 删掉.umi、package-lock.json文件

2. 处理package.json，增删修改某些项，对照推荐文档中说的就行。umi4默认是react18，因为依赖原因，我还是参考官网使用react17。

3. 处理tsconfig.json，加上types

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

4. 处理typings.d.ts文件，添加类型声明，可以省去很多报错。关于TS和类型声明，推荐阅读这一篇

   zhuanlan.zhihu.com/p/194196536

   declare module '*.css'
   declare module '*.less'
   declare module '*.png'
   declare module '*.jpg'
   declare module '*.jpeg'
   declare module '*.gif'
   declare module '*.bmp'
   declare module '*.tiff'
   declare module '*.json'
   declare module 'umi'
   declare module '*.svg' {
       export function ReactComponent(props: React.SVGProps<SVGSVGElement>): React.ReactElement
       const url: string
       export default url
   }
   

5. 配置层的迁移，参照官网

6. 代码层的修改，主要是路由从5升级到6的写法改变，对照官网来即可。

7. 个人遇到的错误。引入less文件格式报错，不知道为啥，改了就对了

   //错误

   import * as styles from './styles/RsSelect.less'

   //正确

   import styles from './styles/RsSelect.less'