发布 umi 2.2，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt

内容简介：通过 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，这能让我的工作目录变得很小。

发布 umi 2.2，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt

（图：我的部分工作目录，供 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;
}

例子， sorrycc-aRg4p8.zip

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 test jest.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！ :tada: :tada: :tada:

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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

从界面到网络空间

（美）海姆 / 金吾伦/刘钢 / 上海科技教育出版社 / 2000-7 / 16.40元

计算机急剧改变了20世纪的生活。今天，我们凭借遍及全球的计算机网络加速了过去以广播、报纸和电视形式进行的交流。思想风驰电掣般在全球翻飞。仅在角落中潜伏着已完善的虚拟实在。在虚拟实在吕，我们能将自己沉浸于感官模拟，不仅对现实世界，也对假想世界。当我们开始在真实世界与虚拟世界之间转换时，迈克尔·海姆问，我们对实在的感觉如何改变？在〈从界面到网络空间〉中，海姆探讨了这一问题，以及信息时代其他哲学问题。他......一起来看看《从界面到网络空间》这本书的介绍吧!

码农工具

发布 umi 2.2，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt

重要更新

pwa

svg as component

yarn PNP

modifyRouteProps

umi/prompt

其他更新

升级到 umi@2.2

感谢

从界面到网络空间

HTML 压缩/解压工具

RGB HSV 转换

HSV CMYK 转换工具