众筹网站建设需要多少资金,济宁最新通知今天,怎么学装修设计,悦然大家好#xff0c;我是若川。欢迎加我微信 ruochuan12#xff0c;长期交流学习。今天分享一篇技术热点#xff0c;众所周知#xff0c;前不久vue3不打算支持IE11#xff0c;vue2将支持composition API#xff0c;现在vue2用ts重构#xff0c;试问#xff1a;还学得动嘛… 大家好我是若川。欢迎加我微信 ruochuan12长期交流学习。今天分享一篇技术热点众所周知前不久vue3不打算支持IE11vue2将支持composition API现在vue2用ts重构试问还学得动嘛^_^。点击下方卡片关注我或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列事情起源于 4 月 7 号晚上尤雨溪在推特说Vue2 收到了一个将整个代码库迁移到 TypeScript 的 PR。Evans 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 代码的迁入/迁出成本都非常低可以一个文件一个文件地迁移不需要一竿子全弄了。Babel 和 ESLint 都有对应的 Flow 插件以支持语法可以完全沿用现有的构建配置更贴近 ES 规范。除了 Flow 的类型声明之外其他都是标准的 ES。万一哪天不想用 Flow 了用 babel-plugin-transform-flow-strip-types 转一下就得到符合规范的 ES。在需要的地方保留 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 的代码合并。具体内容先看作者对这次更新的简单描述代码格式化风格更新。重构。构建相关的改动。代码库更新为 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基础系列
