Vite是一种相对于webpack更现代化,更高效的前端框架构建工具,具有以下的特点:
不需捆绑:服务器冷启动非常快。
按需编译代码: 只编译当前界面实际导入的代码,不必整个应用被捆绑后才开始开发,利于多页面应用开发。
热更新(Hot Module Replacement, HWR)的性能与模块总数解耦,速度快无关应用大小。
注意:1. 项目整个页面重载的比基于绑定的webpack项目稍慢,因基于<script module>导入方式易引起大量网络请求,本地开发忽略不计。
2.默认内置的esbuild编译器,在将TypeScript转换为javascript的工作上的性能表现优异,比常用的tsc工具快20-30倍,HMR更新可以在50ms内反映在浏览器中。
一、创建项目
首先通过如下命令创建一个vite项目,并安装好Electron依赖,相应的npm指令如下:
npm init vite viteElectron
cd viteElectron
npm install
npm install electron --save-dev
yarn add @vitejs/plugin-vue --dev
一般情况下为一个工程安装依赖时,都是安装为开发依赖(--save-dev),因为生产依赖都会在Electron-builder打包时被放到安装包内。但Electron-builder会另外准备Electron,所以不需要自己的生产依赖。
二、定义启动脚本
在项目的package.json文件中添加启动脚本如下:
#package.json
"script" {
"start": "node ./script/dev",
}
项目开发成功后,开发者可以通过npm run start 方式启动应用。
在根目录的script/dev/下, 创建文件index.js,它是启动开发环境的脚本,它主要完成如下四项工作:
(1)启动Vue项目的开发服务。
(2)设置环境变量
(3)编译主进程代码
(4)启动Electron子进程,并加载Vue项目的首页。
三、启动开发任务
主要工作是通过vite内置koa服务加载Vue项目,让它运行在http://localhost下,有这个服务,我们修改界面代码时,Vite的热更新机制会使修改的内容实时反馈到界面。Vite提供了命令行启动项目外,也提供了javascript API供开发人员通过编码方式启动项目。在index.js文件内直接调API来启动项目,关键代码如下:
let vite=require("vite")
let vue=require("@vitejs/plugin-vue")
let dev = {
server: null,
serverPort: 1600,
electronProcess: null,
/*
async createServer() {
let options = {
configFile: false,
root: process.cwd(),
server: {
port: this.serverPort,
},
plugins: [vue()],
};
this.server = await vite.createServer(options);
await this.server.listen();
},
*/
createServer () {
return new Promise((resolve, reject) => {
let options = {
root:process.cwd(),
enableEsbuild: true
};
this.server = vite.createServer(options);
this.server.on("error", (e) => this.serverOnErr(e));
this.server.on("data", (e) => console.log(e.toString()));
this.server.listen(this.serverPort, () => {
console.log(`htt