likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 39

hello,大家好,我是德莱问,今天为大家带来wp2vite。

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

wp2vite

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

首先介绍一下今天的主角,这是一个命令行工具、自动化工具。

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

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

不过对于一个前端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,使用过程中有任何问题欢迎联系我们;当然如果你想参与贡献,我们也非常欢迎

转载自:https://segmentfault.com/a/1190000039767234
评论
请登录