upgrade umi@3 partly

This commit is contained in:
Baorong Li
2020-03-18 16:17:25 +08:00
parent c6ea0454b3
commit 422a6fed30
23 changed files with 65 additions and 99 deletions
+2 -26
View File
@@ -1,6 +1,5 @@
// https://umijs.org/config/
import { resolve } from 'path'
import { i18n } from './src/utils/config'
const fs = require('fs')
const path = require('path')
const lessToJs = require('less-vars-to-js')
@@ -14,32 +13,8 @@ export default {
dva: { immer: true },
antd: {},
dynamicImport: {
// loading: 'components/Loader/Loader'
loading: 'components/Loader/Loader'
},
// TODO: routes need to be array
// routes: {
// update: routes => {
// if (!i18n) return routes
// const newRoutes = []
// for (const item of routes[0].routes) {
// newRoutes.push(item)
// if (item.path) {
// newRoutes.push(
// Object.assign({}, item, {
// path:
// `/:lang(${i18n.languages
// .map(item => item.key)
// .join('|')})` + item.path,
// })
// )
// }
// }
// routes[0].routes = newRoutes
// return routes
// },
// },
// not support in umi@3
// pwa: {
// manifestOptions: {
@@ -67,6 +42,7 @@ export default {
themes: resolve(__dirname, './src/themes'),
utils: resolve(__dirname, './src/utils'),
},
extraBabelPresets: ['@lingui/babel-preset-react'],
extraBabelPlugins: [
[
'import',
-8
View File
@@ -1,8 +0,0 @@
const fs = require('fs')
const path = require('path')
const lessToJs = require('less-vars-to-js')
module.exports = () => {
const themePath = path.join(__dirname, '../src/themes/default.less')
return lessToJs(fs.readFileSync(themePath, 'utf8'))
}
+1 -1
View File
@@ -5,5 +5,5 @@ Most asked
## create new page
1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
2. modify namespace/pathMatchRegexp in model.js
2. modify namespace/pathToRegexp in model.js
3. modify mock route.js to add a route
+1 -1
View File
@@ -3,5 +3,5 @@
## 新建页面
1. 直接从/src/pages复制一个page (会自动创建路由[umi](https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1))
2. 修改 namespace/pathMatchRegexp 在 model.js
2. 修改 namespace/pathToRegexp 在 model.js
3. 修改 mock中route.js增加一条route
+1 -1
View File
@@ -12,7 +12,7 @@
npm run add-locale ja
```
2. 提取代码中需要翻译的字段,即 `<Trans>message</Trans>`、`` i18n.t`message `` 中 `message` 字段,运行下面命令后 `src/locales/ja/messages.json` 将会出现提取后的字段配置。
2. 提取代码中需要翻译的字段,即 `<Trans>message</Trans>`、`` intl.formatMessage({ id: 'message `` 中 `message` 字段,运行下面命令后 `src/locales/ja/messages.json' }) 将会出现提取后的字段配置。
```bash
npm run extract
+2 -1
View File
@@ -1,4 +1,5 @@
import { Mock, Constant, qs, randomAvatar } from './_utils'
import { Mock, Constant, randomAvatar } from './_utils'
import qs from 'qs'
const { ApiPrefix } = Constant
+4
View File
@@ -6,6 +6,7 @@
"dependencies": {
"@ant-design/compatible": "^1.0.0",
"@ant-design/icons": "^4.0.0",
"@lingui/react": "^2.8.0",
"ant-design-pro": "^2.3.0",
"antd": "^4.0.0",
"axios": "^0.19.0",
@@ -38,6 +39,9 @@
"store": "^2.0.0"
},
"devDependencies": {
"@lingui/babel-preset-react": "^2.8.2",
"@lingui/cli": "^2.8.2",
"@lingui/loader": "^2.8.2",
"@umijs/preset-react": "^1.4.0",
"babel-eslint": "^10.0.1",
"babel-plugin-dev-expression": "^0.2.1",
+4 -3
View File
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import { Breadcrumb } from 'antd'
import { Link, withRouter } from 'umi'
import { Icon as LegacyIcon } from '@ant-design/compatible'
import { pathMatchRegexp, queryAncestors, addLangPrefix } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import { queryAncestors } from 'utils'
import styles from './Bread.less'
@withRouter
@@ -23,7 +24,7 @@ class Bread extends PureComponent {
item && (
<Breadcrumb.Item key={key}>
{paths.length - 1 !== key ? (
<Link to={addLangPrefix(item.route) || '#'}>{content}</Link>
<Link to={item.route || '#'}>{content}</Link>
) : (
content
)}
@@ -37,7 +38,7 @@ class Bread extends PureComponent {
// Find a route that matches the pathname.
const currentRoute = routeList.find(
_ => _.route && pathMatchRegexp(_.route, location.pathname)
_ => _.route && pathToRegexp(_.route, location.pathname)
)
// Find the breadcrumb navigation of the current route match and all its ancestors.
+3 -4
View File
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types'
import { Icon as LegacyIcon } from '@ant-design/compatible'
import { Menu } from 'antd'
import { NavLink, withRouter } from 'umi'
const { pathToRegexp } = require("path-to-regexp")
import {
arrayToTree,
queryAncestors,
pathMatchRegexp,
addLangPrefix,
} from 'utils'
import store from 'store'
@@ -57,7 +56,7 @@ class SiderMenu extends PureComponent {
}
return (
<Menu.Item key={item.id}>
<NavLink to={addLangPrefix(item.route) || '#'}>
<NavLink to={item.route || '#'}>
{item.icon && <LegacyIcon type={item.icon} />}
<span>{item.name}</span>
</NavLink>
@@ -81,7 +80,7 @@ class SiderMenu extends PureComponent {
// Find a menu that matches the pathname.
const currentMenu = menus.find(
_ => _.route && pathMatchRegexp(_.route, location.pathname)
_ => _.route && pathToRegexp(_.route, location.pathname)
)
// Find the key that should be selected according to the current menu.
+2
View File
@@ -1,12 +1,14 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Layout } from 'antd'
import { withI18n, Trans } from '@lingui/react'
import { BulbOutlined } from '@ant-design/icons'
import ScrollBar from '../ScrollBar'
import { config } from 'utils'
import SiderMenu from './Menu'
import styles from './Sider.less'
@withI18n()
class Sider extends PureComponent {
render() {
const {
+5 -4
View File
@@ -2,13 +2,14 @@
/* global document */
import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'umi'
import { withRouter, getLocale } from 'umi'
import { connect } from 'dva'
import { MyLayout } from 'components'
import { BackTop, Layout, Drawer } from 'antd'
import { GlobalFooter } from 'ant-design-pro'
import { enquireScreen, unenquireScreen } from 'enquire-js'
import { config, pathMatchRegexp, langFromPath } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import { config } from 'utils'
import Error from '../pages/404'
import styles from './PrimaryLayout.less'
import store from 'store'
@@ -56,7 +57,7 @@ class PrimaryLayout extends PureComponent {
// Localized route name.
const lang = langFromPath(location.pathname)
const lang = getLocale()
const newRouteList =
lang !== 'en'
? routeList.map(item => {
@@ -70,7 +71,7 @@ class PrimaryLayout extends PureComponent {
// Find a route that matches the pathname.
const currentRoute = newRouteList.find(
_ => _.route && pathMatchRegexp(_.route, location.pathname)
_ => _.route && pathToRegexp(_.route, location.pathname)
)
// Query whether you have permission to enter this page
+6 -5
View File
@@ -1,10 +1,11 @@
/* global window */
import { router } from 'utils'
import { history } from 'umi'
import { stringify } from 'qs'
import store from 'store'
const { pathToRegexp } = require("path-to-regexp")
import { ROLE_TYPE } from 'utils/constant'
import { queryLayout, pathMatchRegexp } from 'utils'
import { queryLayout } from 'utils'
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
import api from 'api'
import config from 'config'
@@ -12,8 +13,8 @@ import config from 'config'
const { queryRouteList, logoutUser, queryUserInfo } = api
const goDashboard = () => {
if (pathMatchRegexp(['/', '/login'], window.location.pathname)) {
router.push({
if (pathToRegexp(['/', '/login'], window.location.pathname)) {
history.push({
pathname: '/dashboard',
})
}
@@ -112,7 +113,7 @@ export default {
store.set('isInit', true)
goDashboard()
} else if (queryLayout(config.layouts, locationPathname) !== 'public') {
router.push({
history.push({
pathname: '/login',
search: stringify({
from: locationPathname,
+3 -3
View File
@@ -1,7 +1,7 @@
import { parse } from 'qs'
import modelExtend from 'dva-model-extend'
import api from 'api'
import { pathMatchRegexp } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import { model } from 'utils/model'
const { queryDashboard, queryWeather } = api
@@ -35,8 +35,8 @@ export default modelExtend(model, {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (
pathMatchRegexp('/dashboard', pathname) ||
pathMatchRegexp('/', pathname)
pathToRegexp('/dashboard', pathname) ||
pathToRegexp('/', pathname)
) {
dispatch({ type: 'query' })
dispatch({ type: 'queryWeather' })
+5 -5
View File
@@ -1,12 +1,12 @@
import React, { PureComponent } from 'react'
import { Redirect, useIntl } from 'umi'
import { Redirect } from 'umi'
import { withI18n } from '@lingui/react'
@withI18n()
class Index extends PureComponent {
render() {
return <Redirect to={intl.formatMessage(
{
id: '/dashboard',
}) } />
const { i18n } = this.props
return <Redirect to={i18n.t`/dashboard`} />
}
}
+6 -5
View File
@@ -1,4 +1,5 @@
import { router, pathMatchRegexp } from 'utils'
import { history } from 'umi'
const { pathToRegexp } = require("path-to-regexp")
import api from 'api'
const { loginUser } = api
@@ -15,11 +16,11 @@ export default {
if (data.success) {
const { from } = locationQuery
yield put({ type: 'app/query' })
if (!pathMatchRegexp('/login', from)) {
if (['', '/'].includes(from)) router.push('/dashboard')
else router.push(from)
if (!pathToRegexp('/login', from)) {
if (['', '/'].includes(from)) history.push('/dashboard')
else history.push(from)
} else {
router.push('/dashboard')
history.push('/dashboard')
}
} else {
throw data
+3 -3
View File
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Tabs } from 'antd'
import { router } from 'utils'
import { history } from 'umi'
import { stringify } from 'qs'
import { Page } from 'components'
import List from './components/List'
@@ -19,7 +19,7 @@ class Post extends PureComponent {
handleTabClick = key => {
const { pathname } = this.props.location
router.push({
history.push({
pathname,
search: stringify({
status: key,
@@ -37,7 +37,7 @@ class Post extends PureComponent {
dataSource: list,
loading: loading.effects['post/query'],
onChange(page) {
router.push({
history.push({
pathname,
search: stringify({
...query,
+2 -2
View File
@@ -1,6 +1,6 @@
import modelExtend from 'dva-model-extend'
import api from 'api'
import { pathMatchRegexp } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import { pageModel } from 'utils/model'
const { queryPostList } = api
@@ -11,7 +11,7 @@ export default modelExtend(pageModel, {
subscriptions: {
setup({ dispatch, history }) {
history.listen(location => {
if (pathMatchRegexp('/post', location.pathname)) {
if (pathToRegexp('/post', location.pathname)) {
dispatch({
type: 'query',
payload: {
+2 -2
View File
@@ -1,4 +1,4 @@
import { pathMatchRegexp } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import api from 'api'
const { queryUser } = api
@@ -13,7 +13,7 @@ export default {
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
const match = pathMatchRegexp('/user/:id', pathname)
const match = pathToRegexp('/user/:id', pathname)
if (match) {
dispatch({ type: 'query', payload: { id: match[1] } })
}
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { router } from 'utils'
import { history } from 'umi'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import { Page } from 'components'
@@ -16,7 +16,7 @@ class User extends PureComponent {
const { location } = this.props
const { query, pathname } = location
router.push({
history.push({
pathname,
search: stringify(
{
+2 -2
View File
@@ -1,5 +1,5 @@
import modelExtend from 'dva-model-extend'
import { pathMatchRegexp } from 'utils'
const { pathToRegexp } = require("path-to-regexp")
import api from 'api'
import { pageModel } from 'utils/model'
@@ -24,7 +24,7 @@ export default modelExtend(pageModel, {
subscriptions: {
setup({ dispatch, history }) {
history.listen(location => {
if (pathMatchRegexp('/user', location.pathname)) {
if (pathToRegexp('/user', location.pathname)) {
const payload = location.query || { page: 1, pageSize: 10 }
dispatch({
type: 'query',
+1 -11
View File
@@ -55,16 +55,6 @@ export function arrayToTree(
return result
}
/**
* Whether the path matches the regexp if the language prefix is ignored, https://github.com/pillarjs/path-to-regexp.
* @param {string|regexp|array} regexp Specify a string, array of strings, or a regular expression.
* @param {string} pathname Specify the pathname to match.
* @return {array|null} Return the result of the match or null.
*/
export function pathMatchRegexp(regexp, pathname) {
return pathToRegexp(regexp).exec(deLangPrefix(pathname))
}
/**
* In an array object, traverse all parent IDs based on the value of an object.
* @param {array} array The Array need to Converted.
@@ -127,7 +117,7 @@ export function queryLayout(layouts, pathname) {
const isMatch = regepx => {
return regepx instanceof RegExp
? regepx.test(pathname)
: pathMatchRegexp(regepx, pathname)
: pathToRegexp(regepx, pathname)
}
for (const item of layouts) {
+5 -6
View File
@@ -1,19 +1,18 @@
import { pathMatchRegexp } from './index'
const { pathToRegexp } = require("path-to-regexp")
describe('test pathMatchRegexp', () => {
describe('test pathToRegexp', () => {
it('get right', () => {
expect(pathMatchRegexp('/user', '/zh/user')).toEqual(
expect(pathToRegexp('/user', '/zh/user')).toEqual(
pathToRegexp('/user').exec('/user')
)
expect(pathMatchRegexp('/user', '/user')).toEqual(
expect(pathToRegexp('/user', '/user')).toEqual(
pathToRegexp('/user').exec('/user')
)
expect(pathMatchRegexp('/user/:id', '/zh/user/1')).toEqual(
expect(pathToRegexp('/user/:id', '/zh/user/1')).toEqual(
pathToRegexp('/user/:id').exec('/user/1')
)
expect(pathMatchRegexp('/user/:id', '/user/1')).toEqual(
expect(pathToRegexp('/user/:id', '/user/1')).toEqual(
pathToRegexp('/user/:id').exec('/user/1')
)
})
+3 -4
View File
@@ -1,9 +1,8 @@
import axios from 'axios'
import { cloneDeep, isEmpty } from 'lodash'
const { pathToRegexp } = require("path-to-regexp")
const { parse, compile } = require("path-to-regexp")
import { message } from 'antd'
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
import qs from 'qs'
const { CancelToken } = axios
window.cancelRequest = new Map()
@@ -20,8 +19,8 @@ export default function request(options) {
url = url.slice(domain.length)
}
const match = pathToRegexp.parse(url)
url = pathToRegexp.compile(url)(data)
const match = parse(url)
url = compile(url)(data)
for (const item of match) {
if (item instanceof Object && item.name in cloneData) {