大家好，我是德莱文，今天给大家带来wp2vite。wp2vite首先介绍今天的主角，它是一个命令行工具和自动化工具。该工具的作用是让使用webpack开发构建的项目支持一键使用vite开发构建。github:https://github.com/tnfe/wp2vitenpm:https://www.npmjs.com/package/wp2vite如果有人不知道webpack和vite是什么，可以点击对应的名字去他们的官网看看。但是对于一个前端er来说，默认大家都知道webpack；如果你不知道vite，建议你了解一下，号称是下一代前端开发构建工具。前段时间写了一篇vite分析试用的文章，在文末简单的解释一下：“vite，真香”。安装使用wp2vite的安装和其他命令行工具一样：npminstall-gwp2viteoryarnglobaladdwp2vite其实用起来很简单，很简单的一个工具，没有那么多配置文件，里面有没有这么长的命令行；//进入你使用webpack开发构建的项目目录cdyour_workspace/your_project//执行wp2vite命令行wp2vite或wp2viteinitwp2vite命令执行后安装依赖并启动项目//安装依赖npminstall//Starttheprojectnpmrundev//如果你的项目有dev脚本，请执行以下命令ornpmrunvite-start实现这个命令行工具的初衷其实来源于vite-content-pro，改变的过程一个webpack项目concent-pro改成一个支持vite的项目，费时费力；作为一个有追求的程序员，用命令行就可以搞定的事情，绝对不会手动复制粘贴~open总的来说，获取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。用于其他类型的webpac的jsk项目暂时不细说了，不过这部分也是可以支持的。需要通过webpack配置文件的位置来获取proxy-proxy。对于react项目，大部分的proxy都存放在setupProxy.js中，wp2vite已经处理过这种proxy，会直接将这里配置的proxy复制到vite的proxy中；我们使用nodejs的require.cache来获取这部分代理，当然也有很多坑。对于vue项目来说，更严重的是，其实是在vue.config.js里面，这样更容易阅读。获取alias-alias关于别名部分，有的别名在webpack的配置文件中，有的实际在tsconfig.json/jsconfig.json中；我们将合并这两个部分的数据并总结vite的别名。补充插件——pluginvite官方提供的插件比较少，但是造轮子的人那么多，插件还是很多的。当然不能和webpack相比，活了很久！对于React项目，jsx语法以js结尾的文件不会被带有jsx-loader的vite解析。我们提供vite-plugin-react-js-support来补充这部分内容；另外，我们会自动注入对于官方的react-refresh插件，对于vue项目我们只会注入一个@vitejs/plugin-vue；本插件依赖一个Vue单文件组件@vue/compiler-sfc，会自动添加到依赖中。对于所有的项目，我们都会以兼容模式注入插件@vitejs/plugin-legacy，并给出基础配置，方便低端浏览器的兼容。自给自足其实还有其他的部分，就不一一细说了。转换工具可以做的事情很多，但是对于不同的项目可能会有不同的问题。请记住，别名是vite的好方法。如果找不到或找不到错误的依赖项，请添加别名。;还在路上。babel7以下项目转换有问题，还在优化中；目前只支持react和vue项目的转换，react性能更好；其他项目暂不支持，正在支持中；测试转换目前只有10多个项目，但都成功了，需要继续测试；欢迎体验wp2vite，使用过程中有任何问题请联系我们；当然，如果你想参与贡献，我们也非常欢迎
