wp2vite的妙用,让webpack项目支持vite-阿里云开发者社区

开发者社区> pcr5nnbbix3xm> 正文

wp2vite的妙用,让webpack项目支持vite

简介: TNTWeb - 全称腾讯新闻前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。 目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。
+关注继续查看

在浏览器支持 ES 模块之前,JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

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

然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。
我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用 HMR,文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

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

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

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

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

在前段时间对wp2vite做了一次重构的更新,把之前的分情况处理改为了流式的处理;

第一版的wp2vite是先对项目进行判断,react项目走react的流程,vue的项目走vue的流程;
第二版的wp2vite是流式,一条线完成,不分项目,这样的好处是逻辑更加清晰、代码复用性更强;

wp2vite 第一版时仅对react项目进行了良好的支持,vue项目支持力度非常低;第二版在支持react项目的基础上,对vue项目的支持力度更加友好,
同时因为是流式的渲染,即使不是react项目和vue项目,wp2vite也会为你的项目转为vite提供支持。
安装与使用

53.jpg

关于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,其他的基本就没有了。下面我们简单说下步骤:

首先会根据你的项目进行分析,包括package.json文件里面的依赖、node_modules下面的文件等,获取当前项目的一些环境信息(env),包括但不限于isReact、isVue、isVue2、isVue3等。
根据上面获取到的项目信息,项目类型等获取项目的webpack的配置;

此处坑较多,因为不同的脚手架创建的项目webpack配置的路径不一样;而因为前端卷的厉害,所以各种创建项目的轮子层出不穷;
同时还因为脚手架版本的不同,配置文件的获取方式也会有所不同,所以此处浪费了很长的时间去研究各种脚手架的源码,搭配mock函数获取到webpack的配置;

解析上面获取到的环境信息和webpack的配置信息,对此信息进行分析,转化为vite的配置。此时拿到的信息,已经可以进行转换了,这也是第一版时候的终点。第二版的时候还对项目进行了更加深入的分析,例如tsconfig.json的配置等等,还有其他的哈,不一一赘述。

此时开始为项目创建vite所需的配置,包括package.json里面增加vite相关scripts和devDependencies、vite.config.js的创建、HTML的提取和写入等。

如果你想开发小程序或者app的话,可以通过第三方专业开发平台,来帮助你实现开发需求:厦门在乎科技-专注厦门小程序定制开发、app开发、网站开发

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
数据同步框架MS Sync Framework - IDE快速开发支持Local Database Cache
数据同步框架MS Sync Framework [术语、例子、参考资料、Tips] http://www.cnblogs.com/2018/archive/2011/02/22/1961654.html  数据同步框架MS Sync Framework-不同场景使用例子和简要分析 http://www.cnblogs.com/2018/archive/2011/02/23/1961657.html 以上两篇文章对框架的基础有了描述,通过IDE的提供Local Database Cache可以快速的实现一个常用的同步应用。
760 0
信息系统项目管理师考试基本信息说明
信息系统项目管理师考试基本信息说明 一、一年考试次数 信息系统项目管理师考试,每年考2次; 二、具体考试时间 5月份第三个星期六,2017年就是5月20日; 11月份一般是第二个星期六或者第三个星期六,2017年就是11月11日 三、考试三大部分构成: 信息系统项目管理师考试,分为三大部分...
776 0
ubuntu 64位android项目报错的解决方案,打开64位 Ubuntu 的32位支持功能
ubuntu的64位下的android环境,说实话,还真得费点精力了,解决一个问题,又出来一个新问题。 小编昨天刚好不容易将android的环境搭建好了,这不,刚建了个项目,直接就报错,下面是罗列出的几条: 1.
826 0
Webpack 2 视频教程 003 - Webpack 项目初始化
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。
789 0
CentOS7 nginx+tomcat实现代理访问java web项目让项目支持jsp和php
首先配置:nginx # cd /etc/nginx/conf.d/ # cp default.conf tomcat.conf # nano tomcat.conf 请在tomcat.
1254 0
手把手教你如何新建scrapy爬虫框架的第一个项目(下)
前几天小编带大家学会了如何新建scrapy爬虫框架的第一个项目(上),今天我们进一步深入的了解Scrapy爬虫项目创建,这里以伯乐在线网站的所有文章页为例进行说明。 在我们创建好Scrapy爬虫项目之后,会得到上图中的提示,大意是让我们直接根据模板进行创建Scrapy项目。
974 0
+关注
pcr5nnbbix3xm
专注小程序、APP、网站开发
48
文章
11
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载