ecsp-web

umi project

Getting Started

Install dependencies,

$ yarn

Start the dev server,

$ yarn start

umi3.5.8 1.Umi 3 需要 Node 10.13或以上 2.Umi3.x内置了antd、dva，建议移除依赖，避免依赖版本冲突导致无法正常启动项目 npm uninstall -S dva antd 3.升级 umi-plugin-react 为 @umijs/preset-react 先在 package.json 中修改依赖， {

"devDependencies": {

• "umi-plugin-react": "^1"
• "@umijs/preset-react": "^1" } } 然后在config.js修改配置 export default {
• plugins: [
• ['umi-plugin-react', {
• dva: {},
• antd: {},
• ...
• }]
• ],
• dva: {},
• antd: {},
• ... } 4.Umi 3 在配置层做了大量精简 删除 browserslist，和 targets 重复了 删除 babel，基本用不上 *修改 cssLoaderOptions 命名为 cssLoader 删除 cssLoaderVersion，只保留 css-loader@2 的版本 删除 cssPublicPath，css 引用的资源文件用相对路径 ./ 可满足所有场景，没有必要再配 删除 disableGlobalVariables，始终无全局变量，无需配置 删除 disableRedirectHoist，始终不再做 redirect hoist 删除 disableCSSModules 和 cssModulesWithAffix，Umi 3 自动识别 css modules 的使用，无需配置 删除 extraBabelIncludes 和 es5ImcompatibleVersions，node_modules 也走 babel 编译后就没有意义了，无需配置 *修改 history 格式为 { type, options } ，不再支持 string 格式 *修改 lessLoaderOptions 命名为 lessLoader 删除 minimizer，只保留 terserjs *修改 plugins 的格式为字符串，需要先确保依赖的插件是否升级到 Umi 3，然后修改方式参考前面 umi-plugin-react 的修改方式 删除 sass，不再支持，后续会以插件的方式提供 删除 treeShaking，已内置，无需配置 删除 tsConfigFile，没有必要 删除 typescript，TypeScript 编译交给 babel 处理后，之前 ts-loader 的配置就没有意义了 删除 uglifyJSOptions，没有必要 删除 urlLoaderExcludes，没有必要 5.代码层
• import Link from 'umi/link';

• import { Link } from 'umi';

• import router from 'umi/router';

• import { history } from 'umi';

• router.push('/foo');

• history.push('/foo');

• import withRouter from 'umi/withRouter'

• import { withRouter } from 'react-router-dom' 6.动态路由 umi3 中不再使用$来标识动态路，约定 []包裹的文件或文件夹为动态路由，[ $]为可选的动态路由 src/pages/users/[id].tsx 会成为 /users/:id src/pages/users/[id$].tsx 会成为 /users/:id? 7.umi3新增 .umirc.ts文件为配置文件，也可将配置写在config.js中， 前者优先级高 8.umi3新特性，mfsu，是基于webpack5的打包提速方案，开启mfsu可以大幅减少热更新所需的时间，原理是依赖预编译，在首次start和build时时间长，之后就只是打包项目文件和少量依赖， 大多数依赖会使用缓存中的。所以效率会提升。 默认mfsu为不开启，开启mfsu在config.js 中 mfsu:{} webpack5: {} dynamicImport: {} mfsu为异步，所以项目中如果有require引用方式的需要改为import 主要是项目中安装的插件需要注意下 9.配置title 在config.js里添加 title: 'hi', 也可针对具体路由配置title