FAQ
可以关闭 dynamicImport 吗?
可以,但不建议关闭。
1、安装依赖
pnpm i babel-plugin-dynamic-import-node -D
2、配置里加上 extraBabelPlugins
,但只针对 production 开启
// .umirc.tsexport default {extraBabelPlugins: process.env.NODE_ENV === 'production'? ['babel-plugin-dynamic-import-node']: []}
没有 dynamicImport 怎么配置它的 loading ?
定义 src/loading.tsx
:
可以用 react 17 吗?
由于 umi v4 升级了默认的 react 版本到 v18,使用 umi4 时注意下依赖库和 react 18 的兼容情况,如果还需要使用 react 17,请执行以下命令并重启。
pnpm add react@^17 react-dom@^17
代理静态资源到本地后,一直 restart 刷新页面
解法:配置 SOCKET_SERVER=127.0.0.1:${port}
启动项目
SOCKET_SERVER=http://127.0.0.1:8000 pnpm dev
round
: argument must be a number
Error evaluating function 解法:新版 less 中 /
默认被识别为属性简写,通过配置 lessLoader: { math: 'always' }
恢复旧版行为(默认将 /
用作计算符号)。
routes 里的 layout 配置选项不生效
layout 配置被移动到了 app.ts
,详见 runtime-config > layout
document.ejs 去哪了,如何自定义 HTML 模板
除了可以通过 配置项 注入外部 script 、css 外,还可以使用项目级插件更灵活的修改 HTML 产物,参见:issuecomment-1151088426
scripts 里配置的外部 js 文件为什么默认插入到 umi.js 的后面
react 只有在页面加载完毕后才会开始运行,所以插到 umi.js
后面不会影响项目。
若需要插到 umi.js
前面,可参见 issuecomment-1176960539
umi4 我怎么分包
Umi 4 默认按页拆包,如果你觉得还需要优化,可以使用分包策略或手动拆包,详见:代码拆分指南
如果你有将所有 js 产物打包成单 umi.js
文件的需求,请关闭 dynamicImport 。
_layout.tsx 去哪了,我怎么嵌套路由
Umi 4 使用 react-router v6 ,通过 <Outlet />
展示嵌套路由内容,可参见:issuecomment-1206194329
怎么用 GraphQL
配置 graph-ql
loader 的方式可参见: discussions/8218
怎么用 WebAssembly
配置如下:
// .umirc.tsexport default {chainWebpack(config) {config.set('experiments', {...config.get('experiments'),asyncWebAssembly: true})const REG = /\.wasm$/config.module.rule('asset').exclude.add(REG).end();config.module.rule('wasm').test(REG).exclude.add(/node_modules/).end().type('webassembly/async').end()},}
一个实际例子可参见:discussions/8541
怎么自定义 loader
根据场景不同,你可能要先从 静态资源规则 中排除你需要加载的文件类型,再添加你自己的 loader / 或修改,可参考如下实例:
第三方包里如何使用 css modules
直接将第三方包的
jsx
/ts
/tsx
源码发布到 npm ,无需转译为js
Umi 4 支持直接使用。若第三方包产物是
js
的情况,需要将其纳入 babel 额外处理,才可以支持 css modules:
// .umirc.tsexport default {extraBabelIncludes: ['your-pkg-name']}
npm link 的包不热更新怎么解决
Umi 4 默认开启 mfsu
,默认忽略 node_modules
的变化,配置从 mfsu
排除该包即可:
// .umirc.tsexport default {mfsu: {exclude: ['package-name']},}
我的环境很多,多环境 config 文件的优先级是怎样的
加载优先级详见 UMI_ENV ,无论是 config/config.ts
还是 .umirc.ts
同理。
IE 兼容性问题
现代浏览器主流背景下,Umi 4 默认不兼容 IE 。
若你有调整构建兼容目标、兼容非现代浏览器、兼容 IE 浏览器的需求,请参考 非现代浏览器兼容 。
SSR 问题
SSR 目前还处于实验性特性,不建议在生产环境使用,若发现问题可即时在 issue 反馈。
Vue / Vite 问题
Umi 4 新增了 Vite 模式和 Vue 支持,可能存在 edge case ,若发现问题可即时在 issue 反馈。
history
中取的 pathname 为什么和 useLocation
中的不一样
这种情况是在项目配置了 base
。 history.location.pathname
取到的值是浏览器地址中的 pathname
,它是包含 base
的;而路由相关 hooks 取到的值是前端路由定义中的 pathname
,它是不包含 base
的。参考。
调整产物的压缩编码格式
默认 js / css 的压缩器 esbuild
会采用 ascii
格式编码压缩,这可能导致中文字符被转码,增大产物体积。
可通过配置调整到 utf8
编码,防止字符被转换:
// .umirc.tsexport default {jsMinifierOptions: { charset: 'utf8' },cssMinifierOptions: { charset: 'utf8' }}
或通过切换压缩器来解决:
// .umirc.tsexport default {jsMinifier: 'terser',cssMinifier: 'cssnano'}
devServer 选项怎么配置
Umi 4 不再支持配置 devServer
选项,但你可以通过以下方式找到替代: