移动端模版
模版提供基础的首页和playground页面,提供最小配置,暂未接入UI库,和默认模版不同的是提供polyfill和移动端调试工具eruda,之后会加入移动端组件库和移动端适配
代码示例
import React from 'react'
import { createRoot } from 'react-dom/client'
import 'normalize.css'
import '@/style/index.less'
import App from './App'
const container = document.getElementById('root')
const root = createRoot(container as HTMLElement)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
window.__APP_LOADED__ = true
Eruda调试
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/eruda/2.4.1/eruda.min.js"></script>
<script>
eruda.init();
</script>Polyfill
<script
src="https://polyfill.alicdn.com/polyfill.min.js?ua=Android%204.2&features=WeakMap,Object.setPrototypeOf,Object.assign">
</script>Router
import React from 'react'
import Loadable from '@/components/loadable'
import PageFailed from '@/components/page-failed'
import PageLoading from '@/components/page-loading'
import { AjaxError } from '@/components/loadable/Loadable'
export interface RouteConf {
key?: string
path: string
component: string | any
name?: string
}
function PageNotFound() {
return <PageFailed code={404} message="ERR_NOT_FOUND" />
}
interface RouteInitOpts {
filePath?: string
Loading?: () => JSX.Element
}
function createRoute(path: string, options: RouteInitOpts = {}) {
const { filePath = path, Loading = PageLoading } = options
const Failed = PageFailed
const onError = (err: AjaxError) => {
console.error(err)
}
if (__DEV__) {
console.log(`@/pages/${filePath.slice(1)}/page`)
const component = Loadable.loadWithInitialProps(
require(`@/pages/${filePath.slice(1)}/page`),
{ codeSplitting: false, Failed, onError, Loading }
)
return {
path,
component,
key: path
}
}
const component = Loadable.loadWithInitialProps(
() =>
import(
/* webpackChunkName: "[request]" */
`@/pages/${filePath.slice(1)}/page`
),
{ Failed, onError, Loading }
)
return {
path,
component,
filePath
}
}
let routes: RouteConf[] = [
createRoute('/', {
filePath: '/index'
})
]
if (__DEV__) {
routes = [
...routes,
{
path: '/playground',
component: () =>
React.createElement(
Loadable.resolveChunk(require('@/pages/playground/page'))
)
}
]
}
routes = [
...routes,
{
path: '*',
component: PageNotFound
}
]
export default routes