React upgrade umi3 steps

Upgrade umi3
**

Environmental preparation

**
It is recommended to clone the code again to ensure that it is not affected by node_modules
git clone url

Dependency handling

Delete the dva dependency information of package.json and yarn.lock, and add umi dependency. It is recommended to delete yarn.lock and re-yarn install to generate the yarn.lock file
{ "dependencies": {

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

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

• Delete all,

• “mockjs”: “^1.1.0”,
• “babel-plugin-import”: “^1.6.7”
  }
• “gitHooks”: {
• “pre-commit”: “lint-staged”
• }
  "script": { //Replace everything related to roadhog server startup with umi dev } }
  
  
  

Configuration layer migration

According to Umi 3 configuration, rename .webpackrc.js in the project root directory to .umirc.ts. The modified configuration items are as follows

• 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,
  },

transfer page file

Move the page components to the src/pages directory. It is recommended to use the editor's reconstruction function, such as webstorm's shift + F6
**

Entry file modification

**
Change the original project entry file src/index.ts to global.js
//Delete all configuration information, automatically constructed by umi, and introduce the global files required by the project, for example:

• 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';
  Change the original project entry file src/index.less to global.less, and the configuration is basically the same as the original

Configure less global variables

Create a new theme.config.ts in the project root directory or configure the configuration directly in .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,
};
};

Routing configuration migration

Add the following code to src/common/router.js under the master branch of the original dva project, run yarn strart:inman-online, and find the routing information required below in the browser 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))
  }
  Create a new src/config/router.config.js, and copy the routing information obtained from the above operation to the sub-routes routes.
  export default { routes: [ { path: ' /', component: '@/layouts/BasicLayout', routes: }, ], }; layout file modification 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}
  The original src/common/router.js file is retained but No longer maintained.

Startup project

yarn install
yarn start
**

If you can access it after performing the above operations, it means the migration is complete. If there are any omissions or errors, please point them out.

**