2019年前端大事件回顾：流年笑掷，未来可期

港控/mmm° 2023-06-21 07:29 81阅读 0赞

## 前言 ##

> 原文：[A Recap of Frontend Development in 2019][]  
> 译者：前端劝退师

回顾`2019`年前端和Web开发的主要事件，新闻和趋势。

在过去的一年中，前端开发的世界再次迅速发展，本文总结了\`2019·年以来的所有重要事件，新闻和趋势。

原先没有打算翻译这篇，但发现该篇需要科学上网和会员，于是就加上自己的理解，意译了，非重要内容我直接一键翻译了，嘿嘿。

**原文内容不足的，我都加了点补充。**

## 1. 热门前端框架和库的NPM下载量对比 ##

*  `React`在国际上仍是`No.1`库，并且还在增长
 *  `jQuery`作为老牌库仍占据第二的位置
 *  紧随其后的是`Angular`和`Vue`
 *  去年，`Svelte`受到了很多关注，但它仍在努力争取被采用。

![format_png][]

## 2. `WebAssembly`成为连接`Web`的第四种语言 ##

`WebAssembly`成为连接`HTML，CSS`和`JavaScript`的`Web`第四种语言。  
经过一年的平静之后，`WebAssembly`在12月初被 `W3C` 联盟正式收编，并推荐的`Web`语言。

自`2017`年发布`WebAssembly`以来，它已经引起了广泛关注和迅速采用。在过去的几年中，我们看到`了1.0`规范的创建和在所有主要浏览器中的集成。

与`WebAssembly`相关的另一条新闻是：字节码联盟的成立

![format_png 1][]

感兴趣的可以查看：https://bytecodealliance.org/articles/announcing-the-bytecode-alliance

## 3. `TypeScript`使用量激增 ##

`2019`年是`TypeScript`的一年。`TypeScript`不仅成为在`JS`代码中添加数据类型的最佳选择，而且许多开发人员会选择在个人项目和工作中使用它。

在年初发布的`StackOverflow`调查中，`TypeScript`与`Python`并列第二，成为最受欢迎的语言，仅次于`Rust`。可以预见，在`2020`年，它的地位将进一步攀升。

![format_png 2][]

*  `TypeScript v3.0`于`2018`年末发布
 *  而到`2019`年，它发布的版本激增到`v3.7`，其中包括更新的`ECMAScript`功能，例如可选的链接和无效运算符以及对类型检查功能的改进。

> `TypeScript`和`React`受欢迎程度

![format_png 3][]

## 4. "`React Hooks`"成为首选方式，并使`React`继续领先 ##

`Vue`和`Angular`拥有热情的支持者，`Vue`在`GitHub`上甚至超过了`React`。  
但在个人和专业项目中被采用时，`React`继续保持领先地位。

![format_png 4][]

*  在2018年末，`React`团队引入了钩子`hooks`
 *  在2019年，`hooks`吞噬了`React`世界，绝大多数开发人员将其作为管理状态和组件生命周期的首选方式。
 *  在这一年，有无数有关`React hooks`的文章，模式开始固化。
 *  `React`中最重要的工具包都发布了`hooks`化的版本。

`React hooks`提供了一种使用简洁的语法，用以管理功能组件中 组件状态和生命周期。

另外，**`React`提供了构建自定义钩子的功能，这使我们能够创建可重用的代码和共享逻辑，而无需创建高阶组件或使用渲染道具。**

## 5. `React`团队工作重点转移到工具上 ##

`React`团队在`v16.8`中大量增加了钩子`hooks`之后，此后版本变动都相对较小（除了并发模式），同时在年底发布了版本16.14。

团队随后将重点转移到通过提供更多工具来改善用户的开发体验上。

`ReactConf`的发言人和团队经理`Tom Occhino`表示，将会从以下三个目标进行改善：

**准入门槛低，生产率高，和扩展能力强。**

让我们看一下`React`团队计划（或已）发布的功能内容：

*  全新版本的`React DevTools`
 *  全新的`React`性能分析器工具
 *  `Create React App v3` 版本
 *  测试实用程序更新
 *  `Suspense`
 *  并发模式（即将推出）
 *  `Facebook`使用的`CSS-in-JS`（即将发布）
 *  渐进/选择性页面混合（`hydration`）（进行中）
 *  React核心的可访问性改进（即将发布）

![format_png 5][]  
补充：渐进/选择性页面混合（`hydration`）：

**用户在加载网站时已经看到了完整呈现的页面（而不是空白页面），然后该页面变为交互式页面。网站也将受益于重大的性能改进，因为浏览器不需要进行任何重新绘制（使用`React`重新呈现您的页面）**

感兴趣的可以看这篇：[The case of partial hydration (with Next and Preact)][The case of partial hydration _with Next and Preact]

## 6. `Vue`为`v3`版本发行做准备，使用量继续增长 ##

`Vue`可能在国际上尚未获得最多的采用率，但很难不说它拥有最热情的用户。

`Vue`引入了`React`和`Angular`的最佳部分，同时也变得更加简单。

另一个巨大的卖点是它更开放，不受`React（Facebook）`或`Angular（Google）`等大公司的控制。

`Vue`的最大新闻是即将发布的`3.0`版本，`alpha`有望在第四季度末发布。

在2019年，`Vue 2.x`在今年年初仅有少许更新，因为大多数努力都投入到了`v3`版本中。

![format_png 6][]  
`Vue 3.x`重大变化：

*  `Composition API`
 *  全局安装/配置API更改
 *  支持 `Fragments` 和跨组件渲染
 *  `Time Slicing`
 *  重写虚拟 `DOM`(`Virtual DOM Rewrite`)
 *  静态树提升(`static tree hoisting`)、静态属性提升(`static props hoisting`)
 *  `hooks API`
 *  `slot`插槽生成优化（父子组件的单独渲染）
 *  更好的`TypeScript`支持

今年另一个值得注意的版本是`Vue-CLI`的第4版，主要集中在更新基础工具上。

## 7. Angular发行v8(v9?)版本，以及新的Ivy编译/渲染管道 ##

在`2019`年，`Angular`发布了`v8`版本，并且还发布了一个新的渲染器/编译管道，称为`Ivy`。

`Ivy`最大好处是较小的捆绑包尺寸，但是它提供了许多巨大的附加改进。当前，`Ivy`是`Angular 9`之前的可选功能。本文详细介绍了版本8中发布的功能，但值得注意的更新是：

*  现代`JavaScript`的差异加载
 *  选择加入`Ivy`功能
 *  路由器向后兼容性
 *  改进的`Web Worker`捆绑
 *  选择加入使用情况分享
 *  依赖关系更新

![format_png 7][]  
在2019年12月，`Angular`团队准备了`v9`版本的发布，该版本将于`2019`年底或`2020`年初正式发布。

`Angular 9`的最大变化是`Ivy`成为标准渲染器。

## 8. 可访问性（`a11y`）和国际化（`i18n`）变得越来越重要 ##

自2015年开始，`JavaScript`和网络快速发展之后，模式和框架终于得到巩固。

这使开发人员可以将更多的精力放在应用本地化并让其更易于访问的工具上，从而使每个人的网络体验变得更好。

**我们应该为所取得的进展感到自豪，但是还有很长的路要走。**

原文中对可访问性的介绍不全，以下粘贴自鱼头的

[Web开发中最该知道却从不重视的 —— Accessibility][Web_ _ Accessibility]  
![format_png 8][]

`Accessibility`，通常缩写为 `A11Y` ，这缩写取的是首字母 + 中间字母长度 + 结尾字母，译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念，通过这个概念，让互联网访问公平变得可能。

`A11Y`是一件非常正确的事，在某些国家与地区，甚至提供无障碍站点已经成为了法律的一部分。  
在MDN上有这么一句话：**“Web根本的目的是为了服务于所有人，而不是受限于软硬件，语言，文化，位置以及身心状态。”**（原文：`The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.） Web Accessibility`，译为 “网页亲和力（又称网络无障碍、网络可达性、网络可用性、网页可访问性）” 。

无论是一般人或者是身心障碍的朋友，都需要有规范的网站方可便捷地获取信息，无障碍网页则是拓展对网页的规范，以更严谨的态度及条件来设计网页，使网页内容落实“无障碍”让不同程度或需求的用户，可以顺畅的获取网站上的信息。

## 9. `ES2019`功能 ##

`ECMAScript`继续其年度更新周期，为`ES2019`版本添加了新功能:

*  `Object.fromEntries()`
 *  `String.trimStart()` 和 `String.trimEnd()`
 *  `JSON.stringify`更好地处理`unicode`,
 *  `Array.flat()` 和`Array.flatMap()`
 *  `try/catch` 捆绑
 *  `Symbol.description`

尽管`ES2019`进行了一些重大更新，但即将面世的`ES2020`似乎具有自`ES6 / ES2015`以来最受期待的功能：

*  类中的私有字段
 *  可选链接 - `obj.field?.maybe?.exists`
 *  无效的合并运算符— `item ?? 'use this only if item is null/undefined'`
 *  `BigInts`

## 10. `Flutter`爆炸发展元年，挑战`React Native`跨平台框架王者地位 ##

`Flutter`在`React Native`发行2年后发布，目前`Star`数已`81.1k`, 超过`React Native`的`83.2k`指日可待。

但其的`issue`数，已稳定保持了多年的`5000+`。

`Flutter`没有像`React Native`那样与`React Web开`发人员一样拥有开发人员社区来实现共同进步，所以这个受欢迎程度是实打实的：**`Flutter`正在使自己成为最佳的跨平台框架。**

![format_png 9][]

## 11. `JS`基金会和`Node.js`基金会合并成`OpenJS`基金会, `Node v12`成为`LTS`版本 ##

![format_png 10][]  
为了支持`JavaScript`生态系统并加速语言的发展，`Node.js Foundation`和`JS Foundation` 合并成立了`OpenJS Foundation`。

基金会传达的信息是在一个中立的实体下的协作和发展，该实体现在托管31个开源项目，包括`Node，jQuery`和`Webpack`。

这一举动对整个JS社区都是积极的，并得到了`Google，IBM`和`Microsoft`等大型科技公司的支持。

`Node`今年发布了`v12`版本，该版本具有长期支持（`LTS`），直到2023年4月。

`Node12`提供了许多新功能，安全更新和性能改进。一些值得注意的更新包括:

1.  对`import/ export`语句的本机支持
2.  私有类字段
3.  与`V8 Enginev 7.4`版本的兼容性
4.  对`TLS 1.3`的支持以及其他诊断工具

## 12. `Svelte`发布`v3`版本，但采用率欠佳 ##

![format_png 11][]写  
在2020年，观察`Svelte`的成长和发展将是一件很有趣的事情，希望我们能从中得到一些最佳实践，以了解它如何与`React，Vue`和`Angular`等对手竞争。

## 13. 静态站点继续被广泛应用，开发人员爱用`JAMStack`模式 ##

随着诸如`Gatsby`之类的框架利用率的提高，`Netlify`等静态网站主机的快速增长以及无数`headless CMS`公司的出现，静态网站证明了它们将成为`Web`不可或缺的一部分。

*  我们能够使用像`React`等库来构建我们的站点，然后在构建时将它们编译成静态HTML。
 *  由于所有页面现在都是预先构建的，因此不需要服务器时间就可以根据请求将它们与数据混合在一起
 *  这些页面可以立即提供服务，并可以利用在`CDN`缓存的优势，使内容更快应答

静态站点使用的一种流行编程模式是`JAMStack（JavaScript，API，Markup）`

![format_png 12][]  
这是一种`静态/ SPA`混合方法，其中页面是静态服务的，但是一旦在客户端上，它就被作为`SPA`使用。

## 14. 前端工具变得更好 ##

几年来，`JavaScript`疲劳一直是前端开发们吐槽的核心，但是随着开源项目维护人员的不懈努力，我们逐渐看到它可以缓解这种疲劳。

以前，如果我们想构建`SPA`，则必须使用`Bower`或`NPM`引入依赖关系，弄清楚如何使用`Browserify`或`Webpack`对其进行编译，从头开始编写`Express`服务器，以及在遇到问题时维护应用更新

**我们经历了数年的痛苦，但现在我们已经迭代到最活跃，最发达的软件包生态系统之一。**

*  有一些工具可以帮助我们抽象化构建应用的痛苦部分-`Creat React App，Vue CLI，Angular CLI`
 *  用于静态站点的`Gatsby`，用于`React Native`移动应用程序的`Expo`，用于`SSR`应用程序的`Next / Nuxt`。
 *  即时`GraphQL`引擎:`Hasura`，可以自动生成`TypeScript`类型。
 *  `Webpack`不断得到简化，很多优化插件已内置。

## 15. `GraphQL`继续受到开发人员的喜爱，并在科技公司中得到进一步的采用 ##

`GraphQL`有望解决基于`REST`的传统应用暴露出的许多问题。开发人员很快就爱上了`GraphQL`。`GitHub`几年前用`GraphQL`编写了它的最新`API`，许多其他组织也在进行更改。

`GraphQL`应用是数据驱动的，而不是端点驱动的。

从而允许客户端声明所需的确切数据，并从服务器接收相应的`JSON`响应。

`GraphQL API`提供了一个架构，用于记录所有数据及其类型，从而使开发人员可以全面了解`API`。  
由于`GraphQL API`提供了完全类型化的架构，因此它也可以与`TypeScript应用`很好地集成。

在过去的一年中，`GraphQL`的下载量增长了一倍以上：

![format_png 13][]

## 16. `CSS-in-JS`势头强劲 ##

如前所述，`Facebook`甚至可能将`CSS-in-JS`视为前端的未来，并将发布自己的库。

在传统应用中，我们添加样式需要这么做：

// Component JS file
    const MyComp = ({ isActive }) => {
      const className = isActive ? 'active' : 'inactive';
      return <div className={className}>HI</div>
    }
    // CSS file
    .active { color: green; }
    .inactive { color: red; }

使用`CSS-in-JS`，你将不再管理`CSS`类，只需传递`props`给样式化的组件，它便使用声明性语法处理动态样式。代码更加简洁。

现在，所有内容都像正常的`React`代码一样读取：

const Header = styled.div` 
      color：$ {（{isActive}）=> isActive吗？'green'：'red'}; 
    `; 
    const MyComp =（{isActive}} =>（
      <Header isActive = {isActive}> HI </ Header> 
    ）

`CSS-in-JS`两个主要的库是：`styled-components`和`emotion`

![format_png 14][]

## 17. `VS Code`主导了编辑器的市场 ##

各语言开发人员对自己的IDE /文本编辑器充满热情，并且不怕争论为什么他们的选择是最好的。

但是，前端开发人员几乎一致选择`VS Code`作为其编辑器`。VS Code`是一个开源编辑器，它提供丰富的插件来提供令人难以置信的开发体验。

这是根据`2018`年调查状况（2019年调查将更新）的文本编辑器使用分布：

![format_png 15][]

## 18. `Webpack 5`迭代到测试版并即将发布 ##

`Webpack`已成为几乎所有现代`JavaScript`工具链的核心组件，并且是最常用的构建工具。

`Webpack`一直在提高其性能和可用性，使其对开发人员更好。`Webpack 5`着重于以下几点：

*  通过持久缓存提高构建性能。
 *  使用更好的算法和默认值来改善长期缓存。
 *  清理内部模式而不会造成任何重大更改。

## 19. `Jest`从`Flow`迁移到`TypeScript` ##

`Facebook`维护着流行的测试库`Jest`和`Flow`，后者是`TypeScript`的竞争对手。

他们在`2019`年初发表了声明，选择将`Jest`从`Flow`迁移到`TypeScript`。

![format_png 16][]  
`Flow`现在是“姥姥不疼，舅舅不爱”的处境了。。。

## 20. `Chrome`在今年发布`72–78`稳定版本 ##

`Chrome`继续快速迭代，迅速向网络和开发人员工具中添加了新功能。

在2019年，我们看到发布了7个稳定版本，其中还有`Beta v79`，`dev v80`和`canary v81`

查看下面的Wiki，了解过去一年中`Chrome`的重要新增功能。  
[《Chrome新功能一览》][Chrome]

## 21. `Microsoft Edge`浏览器内核移至`Chromium` ##

`Internet Explorer`及其更新的版本`Edge`对`Web`开发者来说是一个玩笑，更糟的是，兼容它们时都会痛苦不堪。

微软顺应市场的选择，使用了开源`Chromium`

## 22. `Facebook`发布了`Hermes`，这是安卓的`JavaScript`引擎，用于改进`React Native` ##

`Facebook`认为`Android JavaScript`引擎的速度不够快，因此他们建立了自己的引擎。

![format_png 17][]  
感兴趣的可以看这篇：[Meet Hermes, a new JavaScript Engine optimized for React Native][Meet Hermes_ a new JavaScript Engine optimized for React Native]

## `2020`年的趋势预测 ##

*  随着代码拆分和`PWA`的进一步利用，性能仍然是`Web`上最重要的一部分。
 *  `WebAssembly`变得越来越普遍，得到了实际采用，并被用于产品中。
 *  `GraphQL`在新的创业公司和新项目上超过了`REST`，而老牌公司则向其迁移。
 *  `TypeScript`成为创业公司和新项目的默认选择。
 *  `CSS-in-JS`可能会成为默认的样式设置方法，而不是普通的`CSS`。
 *  “无代码”应用变得越来越流行。随着AI的改进和应用程序抽象层的增加，构建应用变得越来越容意
 *  `Flutter`可能会取代`React Native`成为构建跨平台移动应用的最佳方式。
 *  `Svelte`将会有更多实际项目使用。
 *  `Deno`（由`Node`创建者构建的`TypeScript`项目）可以实际使用。
 *  `AR / VR`使用诸如`A-Frame，React VR`和`Google VR`等库以及对浏览器中本机`AR / VR`工具的改进，而取得了长足的进步。
 *  容器化（例如`Docker，Kubernetes`）的影响在前端中变得越来越普遍。

## ❤️ 看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -\_-）
2.  关注公众号「前端劝退师」，不定期分享原创知识。
3.  也看看其它文章

![format_png 18][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https://github.com/roger-hiro/BlogFN  
一起玩耍呀。~

[A Recap of Frontend Development in 2019]: https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYnB3OG04ajMxb3Mwcm9nc3MuanBn?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYnE3N2g0ajMwczQwZTJxNjQuanBn?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYnRsZ3dmajMwcHMwYndhYXQuanBn?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYndjcTZzajMxcDQwcnM3YTUuanBn?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYnlkdWwzajMxOGcwZGM0MXIuanBn?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYzAxMDFtajMwcDAwZHdnb3guanBn?x-oss-process=image/format,png
[The case of partial hydration _with Next and Preact]: https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxYzIzNHR0ajMwdzAwZnQ3NmEuanBn?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY2s2ZjByajMwazgwNzJqcm0uanBn?x-oss-process=image/format,png
[Web_ _ Accessibility]: https://juejin.im/post/5dee4e39f265da33ba5a799b
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY244cnhuajMwemswcGU3OG4uanBn?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY3F2b2t1ajMwcTAwc3IxNGYuanBn?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY3Q5bWdhajMwbTgwOWF3aHUuanBn?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY3ZnOW1oajMxN2cwanBhZDEuanBn?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxY3d5ejExajMwcDAwY2k3NHguanBn?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZDBhZTV2ajMxb20wcmdkbWIuanBn?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZDIzN2t0ajMxb3UwcmluNGEuanBn?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZDNlYnR5ajMxOXAwdTBkaTkuanBn?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZDV1Z3IxajMxNW8wZHc0MGcuanBn?x-oss-process=image/format,png
[Chrome]: https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page-----1e7d07966d6c----------------------
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZDgyam5najMwZHAwYWl3ZXouanBn?x-oss-process=image/format,png
[Meet Hermes_ a new JavaScript Engine optimized for React Native]: https://facebook.github.io/react-native/blog/2019/07/17/hermes?source=post_page-----1e7d07966d6c----------------------
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOXQxZGFrbWtrajMwZ2EwOG9xNXouanBn?x-oss-process=image/format,png