关于前端:wp2vite-让webpack项目支持vite

TNTWeb – 全称腾讯新闻前端团队，组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、挪动 APP 等大前端畛域都有所实际和积攒。

目前团队次要反对腾讯新闻各业务的前端开发，业务开发之余也积攒积淀了一些前端基础设施，赋能业务提效和产品翻新。

团队提倡开源共建，领有各种技术大牛，团队 Github 地址：https://github.com/tnfe

明天为大家介绍开源我的项目 wp2vite，作者德莱问 , 我的项目地址: https://github.com/tnfe/wp2vite

why vite

在浏览器反对 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的形式进行开发。这也正是咱们对“打包”这个概念相熟的起因：应用工具抓取、解决并将咱们的源码模块串联成能够在浏览器中运行的文件。

时过境迁，咱们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

然而，当咱们开始构建越来越大型的利用时，须要解决的 JavaScript 代码量也呈指数级增长。蕴含数千个模块的大型项目相当广泛。
咱们开始遇到性能瓶颈 —— 应用 JavaScript 开发的工具通常须要很长时间（甚至是几分钟！）能力启动开发服务器，即便应用 HMR，文件批改后的成果也须要几秒钟能力在浏览器中反映进去。如此周而复始，机灵的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生反对 ES 模块，且越来越多 JavaScript 工具应用编译型语言编写。

wp2vite 介绍

首先介绍一下明天的配角，这是一个命令行工具、自动化工具。

工具的作用是一键让应用 webpack 来进行开发和构建的我的项目反对应用 vite 来进行开发和构建。

• github: https://github.com/tnfe/wp2vite
• npm: https://www.npmjs.com/package/wp2vite

如果有人不晓得 webpack 和 vite 别离是什么，该学习学习了。

不过对于一个前端 er 来说，默认你们是晓得 webpack 的；如果你不晓得 vite 的话，倡议理解一下，号称是下一代前端开发与构建工具.

前段时间写过一篇 vite 解析和尝试的一篇文章 , 在文章最初，舔狗了一下：”vite, 真香 ”。

在前段时间对 wp2vite 做了一次重构的更新，把之前的分状况解决改为了流式的解决;

• 第一版的 wp2vite 是先对我的项目进行判断，react 我的项目走 react 的流程，vue 的我的项目走 vue 的流程；
  第二版的 wp2vite 是流式，一条线实现，不分我的项目，这样的益处是逻辑更加清晰、代码复用性更强；
• wp2vite 第一版时仅对 react 我的项目进行了良好的反对，vue 我的项目反对力度非常低；第二版在反对 react 我的项目的根底上，对 vue 我的项目的反对力度更加敌对，
  同时因为是流式的渲染，即便不是 react 我的项目和 vue 我的项目，wp2vite 也会为你的我的项目转为 vite 提供反对。

装置与应用

对于 wp2vite 的装置，与其余命令行工具装置是一样的：

npm install -g wp2vite
or
yarn global add wp2vite

应用的话，其实是非常简单的，一个特地特地简略的工具，没有那么多配置文件，也没有那么长的命令行；

// 进到你的应用 webpack 开发和构建的我的项目的目录
cd your_workspace/your_project
// 执行 wp2vite 的命令行
wp2vite 
or 
wp2vite --config=./webpack.config.js // 传递配置文件

wp2vite -v // 查看版本

待 wp2vite 命令执行完后，进行装置依赖和启动我的项目

// 装置依赖
npm install

// 启动我的项目
npm run dev // 如果原先你的我的项目有 dev script，请执行上面的命令
or
npm run vite-start

转换效果图：

对于实现

简略说下对于 wp2vite 的实现，应用的命令行工具是cac，应用的丑化输入工具是chalk, 其余的根本就没有了。上面咱们简略说下步骤：

1. 首先会依据你的我的项目进行剖析，包含 package.json 文件外面的依赖、node_modules 上面的文件等，获取以后我的项目的一些 环境信息(env)，包含但不限于 isReact、isVue、isVue2、isVue3 等。
2. 依据下面获取到的我的项目信息，我的项目类型等获取我的项目的 webpack 的配置；
   此处坑较多，因为不同的脚手架创立的我的项目 webpack 配置的门路不一样；而因为前端卷的厉害，所以各种创立我的项目的轮子层出不穷；
   同时还因为脚手架版本的不同，配置文件的获取形式也会有所不同，所以此处节约了很长的工夫去钻研各种脚手架的源码，搭配 mock 函数获取到 webpack 的配置；
3. 解析下面获取到的环境信息和 webpack 的配置信息，对此信息进行剖析，转化为 vite 的配置。此时拿到的信息，曾经能够进行转换了，这也是第一版时候的起点。第二版的时候还对我的项目进行了更加深刻的剖析，例如 tsconfig.json 的配置等等，还有其余的哈，不一一赘述。
4. 此时开始为我的项目创立 vite 所需的配置，包含 package.json 外面减少 vite 相干 scripts 和 devDependencies、vite.config.js 的创立、HTML 的提取和写入等。

最初

wp2vite 是一个工具，工具会帮忙你省却很多繁琐的工作，不过有时候工具不是万能的，如果你的我的项目转换过程中呈现问题，欢送给咱们提交 bug 给咱们，咱们会在第一工夫进行解决。

当然如果转换过后的我的项目还有一些配置或者能够用脚本去实现的事件去做，你也能够参加奉献，咱们也十分欢送

如果你的我的项目是 webpack，同时开发过程中启动慢、热加载慢，能够装置 wp2vite 尝试转成 vite，尝试一下飞快的开发启动体验；如果你的我的项目启动还不那么慢，能够转一下试试，什么叫做飞快。

如果你感觉这个工具帮忙到你了，辛苦给咱们点个 star，咱们将会在开源的路上更加坚持不懈。

团队

TNTWeb – 腾讯新闻前端团队，TNTWeb 致力于行业前沿技术摸索和团队成员集体能力晋升。为前端开发人员整顿出了小程序以及 web 前端技术畛域的最新优质内容，每周更新✨，欢送 star，github 地址：https://github.com/tnfe/TNT-Weekly