Vue2 彻底从 Flow 重构为 TypeScript,焕然一新!

大家好,我是若川。欢迎加我微信 ruochuan12,长期交流学习。今天分享一篇技术热点,众所周知,前不久vue3不打算支持IE11,vue2将支持composition API,现在vue2用ts重构,试问:还学得动嘛^_^。点击下方卡片关注我,或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列


事情起源于 4 月 7 号晚上,尤雨溪在推特说,Vue2 收到了一个将整个代码库迁移到 TypeScript 的 PR。

Evan's twitter

去 Github 围观了一下chore: move to typescript 这个 PR[1],基本上是 10w 行级别代码量的改动,把整个 Vue2 的代码库从原先的 flow 类型系统全部迁移到了 TypeScript,包括代码、构建系统、各种 lint 工具等等,恐怖的战斗力!

Github PR

这个 PR 的贡献者是 Carlos Rodrigues[2],以下是他的自我介绍:

Fullstack developer, interested in @vuejs, @dotnet and @nodejs.

Typescript ????‍♂️

Consultant ????️‍♂️

全栈开发工程师,Vue.js、dotnet、Node.js 的爱好者。

TypeScript 魔法师 ????‍♂️

顾问 ????️‍♂️。

起源

Vue2 为什么最开始选择 Flow 作为类型系统?其实在一个 2016 年的知乎问题Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript?[3]里,尤雨溪已经详细说明了这个问题,以下是当时他的回答:

这个选择最根本的还是在于工程上成本和收益的考量

Vue 2.0 本身在初期的快速迭代阶段是用 ES2015 写的,整个构建工具链也沿用了 Vue 1.x 的基于 ES 生态的一套(Babel, ESLint, Webpack, Rollup...),全部换 TS 成本过高,短期内并不现实。

相比之下 Flow 对于已有的 ES2015 代码的迁入/迁出成本都非常低:

  1. 可以一个文件一个文件地迁移,不需要一竿子全弄了。

  2. Babel 和 ESLint 都有对应的 Flow 插件以支持语法,可以完全沿用现有的构建配置;

  3. 更贴近 ES 规范。除了 Flow 的类型声明之外,其他都是标准的 ES。万一哪天不想用 Flow 了,用 babel-plugin-transform-flow-strip-types 转一下,就得到符合规范的 ES。

  4. 在需要的地方保留 ES 的灵活性,并且对于生成的代码尺寸有更好的控制力 (rollup / 自定义 babel 插件)

不过在 2018 年的时候,尤大更新了回答,真香定律再现:

真香

也正因如此,Vue3 从一开始就选择了 TypeScript 作为类型系统。

困扰

那么也许有人要问,Vue2 不是已经稳定了吗,何必再大费周章的把这么多代码迁移到 TypeScript 中呢?其实在之前 Vue3 放弃 IE11 的 RFC 中就有提及,之后还是会为 Vue 2.7 去加入一些和 Vue3 语法更类似的功能:

  • 把 @vue/composition-api plugin[4]合并进 Vue2。这会让使用 Composition API 开发的库同时支持 Vue2 和 Vue3。

  • 单文件组件(SFC)中的script setup[5]语法。

  • emits 选项。

  • 提升 TypeScript 类型支持。

  • 在 Vite 中正式支持 Vue 2(目前通过非官方插件[6])

而这些功能的开发和适配,如果继续用 flow 的话,势必会带来一些割裂的开发体验。一些已经用 TS 开发好的库,也没办法做代码的合并。事实上 Twitter 也有网友提出了这个问题,PR 作者进行了回答:

Why

简单来说,就是为 Vue 2.7 的开发做准备,尤其是 composition-api 的代码合并。

具体内容

先看作者对这次更新的简单描述:

  1. 代码格式化风格更新。

  2. 重构。

  3. 构建相关的改动。

  4. 代码库更新为 TypeScript 编写。

值得一提的是,更换成 TS 之后,生成的代码体积都有少量的增加,作者猜测是 TS 加入了一些 runtime 的代码导致的:

第一个 Commit 中,作者把代码的类型全部改成 .ts,移除文件开头 flow 的标记,并且把类型的语法全部替换成 TypeScript:

作者用 TS 的 import type 语法重构了类型导入,我个人也比较喜欢这样导入类型,更有助于区分导入的内容:

单测工具的更新,以及 TS 的支持,利用 ts-loader 做编译:

RollUp 版本的一次大升级:

ESLint 也需要一些改动,使用 @typescript-eslint/parser,继承的一些推荐预设也改为 @typescript-eslint/eslint-recommended

CI 中原本 flow 的类型检测,也改成使用 tsc --noEmit 做 TS 的类型检查。

评价

可怕的是,这个如此庞大的 PR 是作者在几天内完成的,这战斗力简直是惊人。

Twitter 的评论中有人提问:“把如此巨大的代码库迁移到 TypeScript 需要多长时间?”

作者回答:在几小时内重命名文件,把 flow types 重写成 TS 类型并修复错误,之后的几天主要是忙构建、测试相关的工作。

对此,外国推友也表示很震惊:

“你简直是个机器”:

“他生活的宇宙中,1 小时可以顶我们 24 小时,或者也可能他是用光速在敲代码”

CamiloR:“太棒了,很高兴核心团队之外,也有人付出如此多的努力”

Carlos:“我就是核心团队的成员 ????”

总结

不得不感叹,十倍工程师是真实存在的……这样一次巨型代码库迁移只花了短短几天时间,其实也体现出作者在 TS 生态、构建以及测试相关方面的熟悉程度。

感谢 Vue 核心团队成员们夸张的战斗力,给前端界带来这么优秀的框架而且持续迭代和优化。

Vue 3 虽然是未来,但是 Vue 2 也不会被放弃,迁移到 TS 以后的 Vue 2 具有更强的代码可移植性,一定会绽放出更多精彩。

参考资料

[1]

chore: move to typescript 这个 PR: https://github.com/vuejs/vue/pull/12001/commits

[2]

Carlos Rodrigues: https://twitter.com/pikax_dev

[3]

Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript?: https://www.zhihu.com/question/46397274/answer/101193678

[4]

@vue/composition-api plugin: https://github.com/vuejs/composition-api

[5]

script setup: https://github.com/vuejs/rfcs/pull/227

[6]

非官方插件: https://github.com/underfin/vite-plugin-vue2


最近组建了一个江西人的前端交流群,如果你也是江西人可以加我微信 ruochuan12 拉你进群。



················· 若川出品 ·················

今日话题

今天分享一个chrome浏览器标签预览功能,打开chrome://flags,搜索tab hover Card Images,改成Enabled就开启啦,快试试吧。欢迎分享、收藏、点赞、在看我的公众号文章~

一个愿景是帮助5年内前端人走向前列的公众号

可加我个人微信 ruochuan12,长期交流学习

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还能加我进模拟面试群)

如何拿下阿里巴巴 P6 的前端 Offer

点击方卡片关注我,或者查看源码等系列文章。
学习源码整体架构系列、年度总结、JS基础系列

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

红米note5linux刷机包__最新最全的红米Note5ROM刷机包下载、刷机教程_红米Note5论坛_移动叔叔...

本帖最后由 压力山大大叔 于 2018-5-15 00:52 编辑20180513跟新全屏手势。看最后一张载图。1:先解锁,刷第三方,都是这个流程。2非常干净,只有670兆,刷完没有找到浏览器,刷前下载一个浏览器在手机里备用。3电…

每个网页设计者都自以为是

(一)垃圾还是经典网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。网页设计 者不管自己的学识、技术和经验如何,都自以为自己…

文件夹的拷贝

文件夹用来把文件包裹起来,褪去这些外衣,说到底拷贝文件夹也就是拷贝文件 模拟实例:将F:/Picture/test 文件夹 拷贝到 F:/Picture/dir文件夹 该实例中test文件夹下只包含了test.txt文件 步骤分析: 1.通过路径得到File对象 2.递归查…

【抽奖】若川诚邀你加前端群,长期交流学习~

最近有许多读者朋友关注了我,加我好友没有来得及拉群交流。另外偷偷告诉你:公众号回复 411,参与抽奖,送极客时间100元以内的课程,今晚八点开奖,必须开奖前加了我的微信&&像是前端&&关注了我…

帝国cms重置管理员_重新设计《纽约时报》 CMS飞行员

帝国cms重置管理员1.什么是飞行员? (1. What Is Pilot?) For 10 weeks, I joined The New York Times’s Story Formats team as a Product Design Intern. Partnered with technology intern Shormie Faruque, we were tasked with redesigning Pilot.大约十个星期…

微信小程序开发 Request Headers: Provisional headers are shown

在微信小程序开发的时候,写了两个API请求: 请求A://请求Awx.request({url: https://wx.baidu.com/api/wx/getBallByDate,method: POST,dataType: json,data: {date: that.data.curDate},header: {content-type: application/json},success: function(dt…

昆山万象汇机器人_昆山十镇,在售新盘汇总

陆家建伟国际汽车城,均价 7500 元/㎡美吉特家居广场,均价 17000 元/㎡美吉特灯都,均价 17000 元/㎡花桥绿地象屿苏河公园,均价 22950 元/㎡凯德都会新峰,均价 21500 元/㎡越洋国际,均价 18000 元/㎡浦西玫瑰…

Mini 容器学习笔记6——组件的获取(应用)

1. 通过组件Id获取组件实例&#xff1a; [Test]public void GetByIdTest(){ServiceRegistry.Register<Person>("person");var person ServiceLocator.Get<IPerson>("person");Assert.IsTrue(person ! null);var person2 ServiceLocator.Get&…

JavaScript ES2021 最值得期待的 5 个新特性解析

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天分享一篇关于ES2021的5个新特性。点击下方卡片关注我&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列在写本文时&#xff0c;本文提到的新的 JavaScript …

uniapp延迟执行_uniapp微信小程序真机调试点击按钮有1秒延迟

详细问题描述(DCloud产品不会有明显的bug&#xff0c;所以你遇到的问题大都是在特定环境下才能重现的问题&#xff0c;请仔细描述你的环境和重现方式&#xff0c;否则DCloud很难排查解决你的问题)[内容]开发uniapp小程序项目时,在页面中点击按钮后, 数据即时更新, 视图层延迟1秒…

latex排版基础_排版基础分类

latex排版基础重点 (Top highlight)There are many parts to creating a beautiful, functional, memorizing design. That’s what all User Experience designers set out to do. You need to consider your users, strategy, features, content, color, and so much more. A…

AS3 CookBook学习整理(一)

1. 我要改变swf的尺寸和颜色 在flex builder 3里&#xff0c;默认会生成一个全屏、背景色为#869CA7、帧数为24/秒的swf文件&#xff0c;要修改这些参数&#xff0c;只需要在类文件中定义 [SWF(width"800", height"600", backgroundColor"#ffffff"…

微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享

微信小程序研发问题梳理 最近鼓捣小程序的时候&#xff0c;着实遇到了一些问题&#xff0c;尽管有些再翻看文档几遍&#xff0c;就能找到答案&#xff0c;但还是要发挥下烂笔头的功效&#xff0c;顺便梳理下。 问题列表 登录流程小程序标签页地址无法跳转问题页面翻页内容加…

Nginx重启方式

2019独角兽企业重金招聘Python工程师标准>>> 重启方式有三种&#xff1a; 1.简单型&#xff0c;先关闭进程&#xff0c;修改你的配置后&#xff0c;重启进程。 2.重新加载配置文件&#xff0c;不重启进程&#xff0c;不会停止处理请求 3.平滑更新nginx二进制&#x…

axure如何页面滑动时广告位上移_新手APP运营如何做广告位投放

运营是什么&#xff1f;这种问题在各种论坛、贴吧、百度知道、问答百科类中都会出现。上面也有各种大神各式各样的回答&#xff0c;从不同角度向我们阐述了什么是运营。用 户运营、内容运营、社区运营、活动运营、市场运营、等等&#xff0c;各种各样的文章对它们有非常多的分类…

常见的8个前端防御性编程方案

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天分享几个常见的前端防御性编程方案。点击下方卡片关注我&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列关于前端防御性编程我们大多数情况可能遇到过&am…

比特平面分层_平面设计中的分层

比特平面分层One of the first windows to pop up automatically, when I first started using Adobe Photoshop back in 2013, was the Layers one. Albeit I was dabbling around with it for making memes, it was one of the first things I played around with.2013年&…

微软中国推校园先锋计划,保障学生低价获取正版软件

2010年7月13日&#xff0c;人人网 Lucky 7 率先向同学们宣布了"微软校园先锋计划"上线的消息&#xff0c;该计划现在接受学生预购正版 Windows 7 专业版和 Office 2010 专业版&#xff0c;正式销售的日期为7月19日。该计划的官网是&#xff1a;http://ms.shop.edu.cn…

Nginx laraval-admin 页面小图标不显示 问题处理

laraval-admin 页面小图标不显示 类似问题 nginx下加载eot|otf|ttf|woff|svg等404 错误问题 浏览器console控制台报错 GET http://admin.xxx.com/vendor/laravel-admin/google-fonts/fonts/Source-Sans-Pro.woff2 net::ERR_ABORTED 404 (Not Found)CSS 样式引用字体 font-face …

Ajax完整资料加代码

什么是Ajax&#xff1f;答&#xff1a;Ajax是一种无需加载整个网页&#xff0c;就能够更新部分网页&#xff0c;与后台交互的技术。Ajax的优点&#xff1f;答&#xff1a;能够在不更新整个页面的前提下&#xff0c;维护数据。这使得Web程序可以更快速的回应用户的动作&#xff…