使用Vite从零开始构建Electron项目

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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值