【wp2vite]一个让webpack项目支持vite的命令行工具

[dravenww]

wp2vite

hello大家好，我是德莱问，
首先介绍一下今天的主角，这是一个命令行工具、自动化工具。

工具的作用是一键让使用webpack来进行开发和构建的项目支持使用vite来进行开发和构建。

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

如果有人不知道webpack 和vite 分别是什么，可以点击相对应的名字去到它们的官网瞅瞅。

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

前段时间写过一篇vite解析和尝试的一篇文章 ,在文章最后，简单说明了一下："vite,真香"。

安装与使用

关于wp2vite的安装，与其他命令行工具安装是一样的：

npm install -g wp2vite
or
yarn global add wp2vite

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

// 进到你的使用webpack开发和构建的项目的目录
cd your_workspace/your_project
// 执行wp2vite的命令行
wp2vite 
or 
wp2vite init

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

// 安装依赖
npm install

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

关于实现

实现这个命令行工具的初衷，其实还是源于vite-content-pro ,将一个webpack的项目concent-pro 改成一个支持vite的项目过程中，费时费力；

作为一个有追求的程序员来说，能够一个命令行搞定的事情，决不手动去复制粘贴~

开整，获取webpack配置

我们根据项目的不同，webpack的配置也是不一样的，对于react项目来说，其实是有两种，得益于社区造轮子的能力丰富：

• create-react-app: 对于已经进行了eject的create-react-app创建的项目，配置文件是暴露出来的，是在config/webpack.config.js；
• create-react-app: 对于没有进行eject的create-react-app，配置文件是在node_modules/react-scripts/config/webpack.config.js；
• react-app-rewired：在准备工作的时候发现有不少项目使用这个进行创建的项目，这个得配置文件是有一个/config-overrides.js的配置文件；

上面这些是对于规范框架创建的react的项目的；对于vue来说，得益于vue全家桶的普及，基本只有一种：

• vue-cli: 使用它创建的项目，其webpack的配置文件是在/node_modules/@vue/cli-service/webpack.config.js

对于其他类型的webpack项目，暂时没有进行细致的划分，不过这部分也是可以支持的，须要传递一下webpack的配置文件所在的位置。

获取代理-proxy

对于react项目来说，大部分代理都是存放于setupProxy.js里面的，wp2vite对于这种代理进行了处理，会把这里配置的代理直接进行复制到vite的proxy里面；

我们使用nodejs的require.cache获取了这部分的代理，当然了这里面也遇到了不少的坑。

对于vue项目，比较严肃的说，它其实是在vue.config.js里面的，比较容易进行读取。

获取别名-alias

关于alias部分，有一部分别名是在webpack的配置文件里面的，还有一部分其实是在tsconfig.json/jsconfig.json里面的；
我们会对这两部分的数据进行合并，总结出vite的alias。

补充插件-plugin

vite官方其实提供的插件是比较少的，不过造轮子的人是真多，还是有不少插件的，当然跟webpack不能比，它活得久啊！

对于react项目，以js结尾的jsx语法的文件，vite是不会是有jsx-loader进行解析的，我们提供了vite-plugin-react-js-support 补充这部分的不足；
另外我们还会自动注入官方的react-refresh 插件

对于vue项目，我们只会注入一个@vitejs/plugin-vue ; 此插件依赖一个Vue单文件组件@vue/compiler-sfc，会自动加入到依赖中。

对于所有的项目，我们会注入兼容模式的插件@vitejs/plugin-legacy ,并且会给出基本的配置，以便于低端浏览器的兼容处理。

自给自足

其实还有其他的部分工作，就不一一赘述了。

转换工具做的事情，有不少，不过对于不同的项目可能会存在不同的问题，记住一句话 alias是vite的大法，凡是找不到的或者找错了依赖的地方，加alias就对了；

还在路上的事情

• babel7以下的项目转化完成是有点问题的，还在优化；
• 目前只支持react和vue项目的转换，react表现较好；其他项目暂时是不支持的，正在路上；
• 测试转换的项目目前仅有10多个，不过都成功了，还需继续考验；

欢迎体验wp2vite,使用过程中有任何问题欢迎联系我们；当然如果你想参与贡献，我们也非常欢迎