【Electron+Vite】打造vite插件

前言

这篇文章将带大家实现下打造vite插件，并以electron的桌面应用展现出来。

一、环境搭建

1. 创建vite项目

yarn create vite xxx --template vue-ts

2. 安装Electron (由于我的电脑是window系统，直接装electron会报错，所以采用以下解决办法)

• npm install -g cnpm --registry=https://registry.npmmirror.com
• cnpm install --save-dev electron

二、创建Electron,打造桌面应用

1. 目录结构：创建main目录，并在该目录下创建mainEntry.ts文件

2. 编写Electron(此时这样引入electron 没有用的，要用到接下来的vite 进行编译)

import { app, BrowserWindow } from 'electron'

let mianWindow: BrowserWindow;

app.whenReady().then(() => { //electron 一准备好就执行
  mianWindow = new BrowserWindow({}); //创建一个新的浏览器窗口
  mianWindow.loadURL(process.argv[2]) //electron 内置了谷歌的进程，所以会有process
  //process.argv[2] 该代码是用于读取在进程中输入的指令
})

三、结合vite+electron打造vite插件

1. 目录结构：创建plugin文件夹，并在此文件夹内创建devPlugin.ts文件

2. devPlugin.ts文件初步编写

// 打造 vite 插件
import { ViteDevServer } from 'vite' //vite中自带的钩子函数

export let devPlugin = () => {//实现在开发环境下的插件
  return {
    name: 'dev-plugn', //插件名
    //主要是完成主进程的编译工作
    configureServer(server: ViteDevServer) { // vite在启动HTTP服务时，该钩子函数就会执行
    
    /*执行一些操作*/
   }
  }
}

3. configureServer 函数编写，实现主进程的编译工作(主要是先把electron的ts文件转为js文件，然后再监听vite启动服务的事件，创建一个进程，启动electron应用并且electron应用的地址为继承过来的文件所在地址)

// 打造 vite 插件
import { ViteDevServer } from 'vite'

export let devPlugin = () => {//开发环境下的插件
  return {
    name: 'dev-plugn',
    //主要是完成主进程的编译工作
    configureServer(server: ViteDevServer) { // vite在启动HTTP服务时，该钩子函数就会执行
    
      require('esbuild').buildSync({ //esbuild 是vite内置打包模块
        entryPoints: ["./src/main/mainEntry.ts"], //入口文件
        bundle: true, //进行打包
        platform: 'node', // node平台做编译
        outfile: './dist/mainEntry.js', //出口文件
        external: ['electron'] // 排除掉electron 也就是不用深入读取electron模块
      })
      
      server.httpServer?.once("listening", () => {//监听vite启动服务的那一刻
        let { spawn } = require('child_process') //开一个进程
        let addressInfo = server.httpServer?.address() //获取vite运行的地址
        // httpAddress --- vue页面启动的路径
        let httpAddress = `http://${addressInfo.address}:${addressInfo.port}`
        //启动electron应用  require('electron')：引入了electron进来； './dist/mainEntry.js'：相当于去执行了./src/main/mainEntry.ts
        let electronProcess = spawn(require('electron').toString(), ['./dist/mainEntry.js', httpAddress], { 
          cwd: process.cwd(), //运行文件所在目录的绝对路径
          stdio: 'inherit' //单开出来的桌面应用的页面路径也是继承过来的
        })
        
        electronProcess.on('close', () => { //关闭
          server.close()
          process.exit()
        })
      })
    }
  }
}

4. 让devPlugin.ts文件生效(在vite.config.ts文件中引入devPlugin并且调用一下)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { devPlugin } from './plugin/devPlugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [devPlugin(),vue()],
})

注：

在引入import { devPlugin } from './plugin/devPlugin'; 时可能会报错，所以在tsconfig.node.json 文件下在include下修改为：

"include": ["vite.config.ts","./plugin/devPlugin.ts"]

四、效果

浏览器下的：

桌面应用electron下的：

至此，一个在开发环境下的简单的vite插件就打造好了~~~

结束语

本篇文章就到此为止啦，由于本人经验水平有限，难免会有纰漏，对此欢迎指正 。如觉得本文对你有帮助的话，欢迎点赞收藏❤❤❤。要是您觉得有更好的方法，欢迎评论，提出建议！