1、修改依赖
1.1、删除依赖
下面的npm包都可以删掉：
dva
antd
umi-plugin-antd-icon-config
umi-plugin-react
umi-plugin-pro-block
umi-plugin-ga
在dependencies里面的依赖(dva为例)
npm uninstall -S dva || yarn remove dva -S
在devDependencies（代表必须的依赖）里面的依赖
npm uninstall -D dva || yarn remove dva -D
1.2、添加依赖
umi@3
@umijs/preset-react
npm install -D umi@3 @umijs/preset-react ||
yarn add umi@3 @umijs/preset-react -D
1.3、修改安装包文件
// package.json
"engines": {
"node": ">=10.13.0"
}
// tsconfig.json
"paths": {
"@/*": ["src/*"],
"@@/*": ["src/.umi/*"]
}
1.4、注意
Umi 3 需要 Node 10.13或以上，配置了engines属性则需修改对应的版本号
Umi3.x内置了antd、dva，建议移除依赖，避免依赖版本冲突导致无法正常启动项目
为了有更好的 ts 提示，需配置 @@ 为 [“src/.umi/*”]
建议移除node_modules文件夹，重新npm install
2、修改配置文件
2.1、注意
umi2.x和umi3.x都是在.umirc.js 或 config/config.js中进行项目配置，且.umirc.js的优先级依旧高于config/config.js。不同的是umi3.x之后，采用扁平化配置，并且删除或修改了部分配置，
2.2、umi3配置层的修改
- 删除 browserslist，和 targets 重复了
- 移除umi-plugin-react，同时antd、dva不再在plugins内配置，将其提取到同级，两者都接收一个对象；
export default {
- plugins: [
- ['umi-plugin-react', {
- dva: {},
- antd: {},
- locale: {
- enable: true,
- default: 'zh-CN',
- baseNavigator: true,
- },
- dynamicImport: {
- loadingComponent: './components/PageLoading/index',
- webpackChunkName: true,
- level: 3,
- },
- ...
- }]
- ],
+ dva: {},
+ antd: {},
+ locale: {
+ enable: true,
+ default: 'zh-CN',
+ baseNavigator: true,
+ },
+ dynamicImport: {
+ loading: '@/components/PageLoading/index'
+ },
+ ...
}
- 删除 babel，基本用不上
- 修改 cssLoaderOptions 命名为 cssLoader
export default {
-cssLoaderOptions: {
- modules: true,
- getLocalIdent: (
+ cssLoader: {
+ modules: {
+ getLocalIdent: (
- 删除 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 格式
- history: 'hash',
+ history: {
+ type:'hash'
+ },
- 修改 lessLoaderOptions 命名为 lessLoader
- lessLoaderOptions: {
- javascriptEnabled: true,
- },
+ lessLoader: {
+ javascriptEnabled: true,
+ }
- 删除 minimizer，只保留 terserjs
- 修改 plugins 的格式为字符串，需要先确保依赖的插件是否升级到 Umi 3，然后修改方式参考前面 umi-plugin-react 的修改方式
- 删除 sass，不再支持，后续会以插件的方式提供
- 删除 treeShaking，已内置，无需配置
- 删除 tsConfigFile，没有必要
- 删除 typescript，TypeScript 编译交给 babel 处理后，之前 ts-loader 的配置就没有意义了
- 删除 uglifyJSOptions，没有必要
- 删除 urlLoaderExcludes，没有必要
