React升级umi3步骤

升级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
**

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

**