内容简介：通过 umi-plugin-react 开启，例子：引用 svg 时如果 specifier 为 ReactComponent，会作为 react 组件输出。
重要更新
- 完善 pwa 支持，支持 manifest.json、改进缓存策略和更新机制等， #1307
- 支持 svg 以 react 组件输出， #1263
- 通过插件 umi-plugin-pnp 的方式支持 Yarn Play'n'Play，大幅提升依赖包安装速度，以 ant-design-pro 为例，按需依赖仅需 13s
- 支持在 app.js 里通过 modifyRouteProps 修改运行时的路由 props， #1324
- 添加 umi/prompt 接口，对应 react-router 的 Prompt 组件， #1267
- create-umi 更新 0.5，支持通过
create-umi --plugin创建 umi 插件
pwa
通过 umi-plugin-react 开启，
export default {
plugins: [
['umi-plugin-react', { pwa: {} }],
],
}
例子： https://test-pwa.umijs.org/
svg as component
引用 svg 时如果 specifier 为 ReactComponent，会作为 react 组件输出。
比如：
import { ReactComponent as Rice } from './rice.svg';
export default function() {
return (
<div>
<h1>Page index</h1>
<Rice width="120" height="120" />
</div>
);
}
yarn PNP
PNP 即 Plug'n'Play，是 facebook 内部在遇到 node 依赖包下载慢和依赖解析问题时给出的一套解决方案，据说能快 70%，虽然我实际上跑下来没那么快，但也快了 50% 以上。
以 ant-design-pro 为例。
| yarn install | yarn install --pnp | |
|---|---|---|
| 空缓存 | 86s | 65s |
| 满缓存 | 30s | 13s |
空缓存时只快了 24.4%，因为时间主要耗在下载上，这个很难避免；满缓存时快了 56.7%，感受明显。
除去速度上的提升，对我来说主要是不用每个项目都生成一个很大的 node_modules 了。我的工作目录非常大，其中 90% 都是 node_modules 依赖，磁盘空间满的时候总是从这里清。而由于 PNP 不需要复制文件，所以所有的项目都会公用一份 cache，这能让我的工作目录变得很小。
（图：我的部分工作目录，供 103 万个文件）
感兴趣的可以从 这个例子 开始入手。
modifyRouteProps
提供在运行时修改路由组件 props 的能力。
比如想要为 layout 组件提供匹配子路由的 match.params ，可以在 app.js 下配置，
import { matchRoutes } from 'react-router-config';
export function modifyRouteProps(memo, { route }) {
if (/* is layout */route.routes) {
const m = matchRoutes(route.routes, memo.location.pathname);
if (m && m.length) {
memo.match = m[m.length - 1].match;
}
}
return memo;
}
umi/prompt
umi/prompt 用于在路由离开时做确认，背后是 react-router 的 Prompt 组件。
e.g.
import Prompt from 'umi/prompt';
export default () => {
return (
<>
<h1>Prompt</h1>
<Prompt
when={true}
message={(location) => {
return window.confirm(`confirm to leave to ${location.pathname}?`);
}}
/>
</>
);
}
其他更新
- 支持 layout 传值给 child route component， #1282
-
umi testjest.config.js 里的 moduleNameMapper 配置从覆盖改成合并， #1322 - dynamicImport.loadComponent 可以是 stateless function 字符串，比如
loadingComponent: '() => <div>加载中...</div>'， #1325 - chunk script 支持被插入到
<head>中， #1258 - 默认不清屏，解决 umi 启动时日志看不到的问题， #1244
- app.js 可以用 jsx/ts/tsx 作为后缀， #1243
- umi-plugin-locale 根据 targets 配置内置处理 intl 补丁， #1242
- 缓存 withRoutes() 结果，解决使用 Routes 后的 rerender 问题， #1174
- 解决 babel-plugin-macro 的缓存问题， #1252
- 新增 umi-plugin-gh-pages ，支持发布 umi 项目到 Github Page
- 完善用例， #1313
- 大量 bugfix，详见 umijs/umi/release
升级到 umi@2.2
如果你是用 umi@2，umi@2.2 不包含 break chagne，可直接升级；如果用 umi@1.x ，请参考 https://umijs.org/zh/guide/migration.html 升级。
感谢
感谢以下同学提的 PR！
- Jonas Gao ( @JonasGao )
- @xiaoiver
- chencheng (云谦) ( @sorrycc )
- kdot ( @focus7eleven )
- wubaiqing ( @wubaiqing )
- 李蔚生 ( @LeeWeisheng )
- 笨木头 ( @mutouzdl )
- 陈帅 ( @chenshuai2144 )
- Yu ( @yutingzhao1991 )
- Li Chao ( @astrocean )
- ULIVZ ( @ulivz )
- Wensheng Xu ( @dilidili )
- @xiaohuoni
- 信鑫-King ( @ycjcl868 )
- ZYSzys ( @ZYSzys )
- 啸生 ( @ikobe )
以上所述就是小编给大家介绍的《发布 umi 2.2，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- NPM包（模块）发布、更新、撤销发布
- 有赞灰度发布与蓝绿发布实践
- 【重磅发布】Linkis 0.10.0 版本发布
- BeetlSQL 3.0.9 发布，Idea 插件发布
- 贝密游戏 0.7.0 发布，发布斗地主
- 【重磅发布】DataSphere Studio 0.9.0 版本发布
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
