React升级umi3步骤

努力的牛肉丸

已于 2022-11-21 16:44:38 修改

阅读量686

点赞数

文章标签：前端 react typescript

于 2022-11-21 11:35:46 首次发布

本文链接：https://blog.csdn.net/weixin_44835783/article/details/127961179

版权

升级umi3
**

环境准备

**
建议重新克隆一份代码，确保不受node_modules影响
git clone url

依赖处理

删除package.json和yarn.lock的dva依赖信息，增加umi依赖，推荐删除yarn.lock重新yarn install生成yarn.lock文件
{
“dependencies”: {

“dva”: “^2.2.3”,
“dva-loading”: “^1.0.4”,
“dva-model-extend”: “^0.1.2”,

“umi”: “^3.0.18”,
“@umijs/preset-react”: “1.x”
},
“devDependencies”: {

全删,

“mockjs”: “^1.1.0”,
“babel-plugin-import”: “^1.6.7”
}
“gitHooks”: {
“pre-commit”: “lint-staged”
}
“script”: {
//涉及到roadhog server 启动的全部替换成 umi dev
}
}

配置层迁移

根据 Umi 3 配置，将项目根目录的 .webpackrc.js 更名为 .umirc.ts，有修改的配置项如下

import pageRoutes from ‘./config/router.config’;
import theme from ‘./theme.config’;

export default {

entry: ‘src/index.ts’,
env: {
development: {
```
 extraBabelPlugins: ['dva-hmr'],
```
},
},
html: {
template: ‘./src/index.ejs’,
},
disableDynamicImport: true,

dynamicImport: {},
dva: { hmr: true },
extraBabelPlugins: [
[‘import’, { libraryName: ‘antd’, libraryDirectory: ‘es’, style: true }],
[‘import’, {
libraryName: ‘hmcore’,
libraryDirectory: ‘src’,
style: true,
camel2DashComponentName: false,
camel2UnderlineComponentName: false
}, “hmcore”]
],
lessLoader: { javascriptEnabled: true },
title: false,
targets: {
ie: 11,
},
theme: {
…theme(),
},
routes: pageRoutes.routes,
},

转移页面文件

将页面组件转移到 src/pages 目录下面，推荐使用编辑器的重构功能，例如 webstorm 的 shift + F6
**

入口文件修改

**
将原项目入口文件 src/index.ts 更改为 global.js
//删除所有配置信息，由umi自动构成，引入项目所需要的全局文件，例如：

import ‘antd/lib/style/components.less’;
import ‘antd/lib/style/index.less’;
import ‘hmcore/src/Iconfont/iconfont.ts’;
import ‘hmcore/src/Iconfont/style’;
import ‘moment/locale/zh-cn’;
将原项目入口文件 src/index.less 更改为 global.less ，配置与原先基本一致

配置less全局变量

在项目根目录下新建 theme.config.ts or 直接在 .umirc.ts 配置配置 (umijs.org)
const fs = require(‘fs’);
const path = require(‘path’);
const lessToJs = require(‘less-vars-to-js’);

// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
const defaultClassName = {
// theme config
‘card-actions-background’: ‘#f5f8fa’,
};

module.exports = () => {
const themePath = path.join(__dirname, ‘./src/themes/default.less’);
return {
…lessToJs(fs.readFileSync(themePath, ‘utf8’)),
…defaultClassName,
};
};

路由配置迁移

在原dva项目中的 master 分支下 src/common/router.js 下面添加以下代码，运行 yarn strart:inman-online ，在浏览器 localStorage 里找到下面需要的路由信息
const dynamicWrapper = (app, models, component) => {

let arr = [];
const str = component.toString();
const matchStr = str.match(/(?<=/*!\s).+(?=\s*/)/);
if(matchStr) {
arr.push({component:matchStr[0] })
}
}
export const getRouterData = app => {
const routerConfig = {…};
localStorage.setItem(‘routerList’, JSON.stringify(arr))
}
新建 src/config/router.config.js ，将以上操作得到的路由信息复制到子路由 routes 里
export default {
routes: [
{
path: ‘/’,
component: ‘@/layouts/BasicLayout’,
routes:
},
],
};
layout文件修改 src/layouts/BasicLayout.js
{/ /}
{/* {redirectData.map(item => (/}
{/ /}
{/ ))}/}
{/ {getRoutes(match.path, routerData).map(item => (/}
{/ <AuthorizedRoute*/}
{/* key={item.key}/}
{/ path={item.path}/}
{/ component={item.component}/}
{/ exact={item.exact}/}
{/ authority={item.authority}/}
{/ redirectPath=“/exception/403”/}
{/ />/}
{/ ))}/}
{/ /!* !//}
{/* <Redirect exact from=“/” to={‘/home’} />/}
{/ /}
{/*/}
{this.props.children}
原 src/common/router.js 文件保留但不再维护。