快速搭建UmiJS4.0项目及常见问题解决方案

 yarn create umi

选择项目类型

○  Pick Umi App Template
│  Simple App

选择创建工具

○  Pick Npm Client
│  yarn

选择源

○  Pick Npm Registry
│  taobao

启用 Prettier（可选）

yarn umi g
√ Pick generator type » Enable Prettier -- Setup Prettier Configurations

启用Dva

yarn umi g
√ Pick generator type » Enable Dva -- Configuration, Dependencies, and Model Files for Dva

可选配置

? Pick generator type » - Use arrow-keys. Return to submit.
>   Create Pages -- Create a umi page by page name
    Enable Jest -- Setup Jest Configuration
    Enable Tailwind CSS -- Setup Tailwind CSS configuration
    Generate Component -- Generate component boilerplate code
    Generate mock -- Generate mock boilerplate code
    Enable E2E Testing with Cypress -- Setup Cypress Configuration
    Generator api -- Generate api route boilerplate code
    Generate Precommit -- Generate precommit boilerplate code

常见问题

1.如何导入useDispatch、useSelector？

基本上都可以从umi直接导出。

import { useDispatch, useSelector } from 'umi';

也可以：

import { useSelector } from '@umijs/plugins/libs/dva';

你要说哪个好，咱也不知道。

2.如何在ts/js中使用model中的数据？

import { getDvaApp} from 'umi';

const state = getDvaApp()._store.getState();
const {
  global: { mobile, imei },
} = state || {};

const dispatch = getDvaApp()._store.dispatch;
dispatch({
     type: 'components/updateLoadingByKey',
     payload: {
         key: transferComponentId,
         loading: true,
     }
 })

顺便提一句，umi2.0中的使用：

window.g_app._store.getState().global.channel

3.为什么部分RGBA会被转换为HEX8

原本的rgba：

background-color: rgba(0, 0, 0, 0.7);

经过编译后：

在安卓端无法解析，报“属性值无效”。

查看官方文档：

非现代浏览器兼容 (umijs.org)

配置兼容：

// .umirc.ts

export default {
    //提升兼容性，会自动给css添加厂商前缀
  targets: {
    chrome: 67,
    ie: 9,
    ios: 7,
    android: '4.3',
  },
  //防止rgba被编译为HEX8
  cssMinifier: 'cssnano',
  jsMinifier: 'terser',
};

4.iOS如何禁用长按选择？

// global.less

html,
body,
:root {
  user-select: none;
}

//user-select阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、textarea。为了解决Modal弹窗里面input在ios无法编辑的情况
[contenteditable='true'],
input,
textarea {
  user-select: auto !important;
}

如果没有在.umirc.ts配置中配置targets，默认不会添加厂商前缀–webkit，那么也不会生效，要么手动加前缀，要么改targets。

Precommit 配置生成器 禁用烦人的提交信息校验

启用Precommit后输入提交信息会报错：

Error: Invalid commit message format.
Proper commit message format is required for automated changelog generation.
Examples:
  chore(release): update changelog
  fix(core): handle events on blur (close #28)
husky - commit-msg hook exited with code 1 (error)

找到项目根目录下/.husky/commit-msg，注释其中的一段npx --no-install umi verify-commit $1：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

#npx --no-install umi verify-commit $1 禁用提交信息格式化校验

下次提交就不会报错了。