TNTWeb——全称是腾讯新闻前端团队。群里的小伙伴在Web前端、NodeJS开发、UI设计、手机APP等前端领域都有实践和积累。目前团队主要支持腾讯新闻各项业务的前端开发。除了业务发展，它还积累了一些前端基础设施，以实现业务效率提升和产品创新。团队倡导开源共建，拥有各类技术人才。团队Github地址：https://github.com/tnfe今天介绍一下开源项目wp2vite，作者德来文，项目地址：https://github.com/tnfe/wp2vitewhyvite在浏览器支持ES模块之前，JavaScript没有为开发者以模块化的方式进行开发提供原生机制。这就是我们熟悉“捆绑”概念的原因：使用工具将我们的源代码模块抓取、处理和连接成可以在浏览器中运行的文件。随着时间的推移，我们看到了webpack、Rollup、Parcel等工具的变化，极大地提升了前端开发者的开发体验。然而，随着我们开始构建越来越大的应用程序，需要处理的JavaScript代码量呈指数级增长。具有数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈——用JavaScript开发的工具通常需要很长时间（甚至几分钟！）才能启动开发服务器，即使使用HMR，文件修改也需要几秒钟才能在浏览器中反映出来。如此循环往复，反馈慢会极大影响开发者的开发效率和幸福感。Vite旨在利用生态系统的新发展来解决上述问题：浏览器开始原生支持ES模块，越来越多的JavaScript工具是用编译型语言编写的。wp2vite简介首先介绍一下今天的主角，它是一个命令行工具，也是一个自动化工具。该工具的作用是让使用webpack开发构建的项目支持一键使用vite开发构建。github:https://github.com/tnfe/wp2vitenpm:https://www.npmjs.com/package/wp2vite如果有人不知道webpack和vite是什么，是时候学习了。但是对于一个前端er来说，默认大家都知道webpack；如果你不知道vite，建议你了解一下，号称是下一代前端开发构建工具。前段时间写了一篇vite分析试用的文章，文末舔狗：“vite，真香”。前段时间wp2vite做了一次重构更新，将之前的case-by-case处理改为streaming处理；wp2vite第一版先判断项目，react项目走react流程，vue项目走vuewp2vite第二版精简，一行完成，不分项目，优点是逻辑更清晰，更强的代码复用性；wp2vite的第一个版本只对react项目有很好的支持，Vue项目支持很低；第二版在支持react项目的基础上，对vue项目更加友好。同时，因为是流式渲染，所以即使不是react项目或者vue项目，wp2vite也会支持你的项目。转向vite提供支持。安装使用wp2vite的安装和其他命令行工具一样：npminstall-gwp2viteoryarnglobaladdwp2vite其实用起来很简单，很简单的一个工具，没有那么多配置文件，里面有没有这么长的命令行；//进入你使用webpack开发构建的项目目录cdyour_workspace/your_project//执行wp2vite命令行wp2vite或wp2vite--config=./webpack.config.js//传递配置文件wp2vite-v//查看versionwp2vite命令执行后，安装依赖并启动项目//安装依赖npminstall//启动项目npmrundev//如果你的项目有dev脚本，请执行以下命令ornpmrunvite-startconversion效果图：关于实现简单说一下wp2vite的实现。用到的命令行工具是cac，用到的美化输出工具是chalk，其他的基本都没有了。下面简单说一下步骤：首先我们会根据你的项目进行分析，包括package.json文件中的依赖，node_modules下的文件等，获取当前项目的一些环境信息（env），包括但不包括限于isReact,isVue,isVue2,isVue3等。根据上面获取的项目信息和项目类型获取项目的webpack配置；这里有很多坑，因为不同脚手架创建的项目的webpack配置路径不同；而且由于前端体积强大，在创建各种项目的同时，由于脚手架的版本不同，获取配置文件的方式也会有所不同，所以在这里浪费了很长时间研究源码各种脚手架，使用mock函数获取webpack的配置；分析将上面得到的环境信息和webpack的配置信息进行分析，转化为vite的配置。这时候得到的信息已经可以转换了，这也是第一版的终点。在第二版中对项目进行了更深入的分析，比如tsconfig.json的配置等，还有其他的，就不一一赘述了。至此，开始为项目创建vite所需的配置，包括在package.json中添加vite相关的脚本和devDependencies，创建vite.config.js，提取并编写HTML等。最后wp2vite是一个工具。工具会帮你省去很多繁琐的工作，但有时工具并不是万能的。如果您的项目在转换过程中出现问题，请提交bug给我们，我们会尽快解决。.当然，如果转换后的项目还有一些配置或者可以用脚本实现的东西，你也可以参与贡献。如果你的项目是webpack，开发过程中启动慢，热加载慢，我们也欢迎。您可以安装wp2vite并尝试将其转换为vite，体验极速的开发和启动体验；如果你的项目启动不是那么慢，你可以试试，什么是快速开发。如果您觉得这个工具对您有帮助，请给我们一个star，感谢您的辛勤付出，我们会在开源的道路上坚持不懈。TeamTNTWeb——腾讯新闻前端团队，TNTWeb致力于行业前沿技术的探索和团队成员个人能力的提升。针对前端开发者，我们整理了最新的小程序和web前端技术的优质内容，每周更新?，欢迎star，github地址：https://github.com/tnfe/TNT-每周
