electron-sight-quickly
Electron
+ vue3
+ vite
Integration
How and Why
- There are two main purposes for writing this Demo project
vue@3.x
Released, want to try new features
- With work
umi
+ electron
projects big, start-up speed is not ideal; with the vite
try count a reserve program ^ _ ^
Command
- npm run dev
- npm run build
Note 踩坑记
- This form of import {write} from’fs’ will be compiled by vite into /@modules/fs?import
- const {write} = require(‘fs’) This form can be used 😉
- const {ipcRenderer} = require(‘electron’) the same
- Although require can be used to avoid Vite compilation problems during development, but there is a problem with rollup during packaging;
- Take const Store = require(‘electron-store’) as an example, in vite.config.ts you can convert it to EMS form by custom rollup plug-in
// vite.config.ts -> rollupInputOptions -> plugins
plugins: [
{
name: '@rollup/plugin-cjs2esm',
transform(code, filename) {
if (filename.includes('/node_modules/')) {
return code
}
const cjsRegexp = /(const|let|var)[\n\s]+(\w+)[\n\s]*=[\n\s]*require\(["|'](.+)["|']\)/g
const res = code.match(cjsRegexp)
if (res) {
// const Store = require('electron-store') -> import Store from 'electron-store'
code = code.replace(cjsRegexp, `import $2 from '$3'`)
}
return code
},
}
],
to sum up
- 2019 13-inch mac-pro boot speed is about 4 seconds
- Pentium G4560 computer CPU Shenzhou notebook startup speed is about 6 seconds
- There is no doubt that vite’s solution has a lot more advantages than @vue/cli, umi, create-react-app and other webpack-based scaffolding startups.
- Technology is always iterating and progressing rapidly, with the goal of solving some existing or upcoming problems; continue to treat, learn, and cheer~
Download Details:
Author: caoxiemeihao
Source Code: https://github.com/caoxiemeihao/electron-vue-vite
#vuejs #vue #javascript