React升级umi3步骤

戚星腾
2023-12-01

升级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 文件保留但不再维护。

启动项目

yarn install
yarn start
**

执行以上操作能访问则表示迁移完成,如有遗漏或错误请指出。

**

 类似资料: