Electron+ vue3+ viteIntegration

electron-sight-quickly

Electron+ vue3+ viteIntegration

Short book address

How and Why

• There are two main purposes for writing this Demo project

1. vue@3.x Released, want to try new features
2. With work umi+ electronprojects big, start-up speed is not ideal; with the vitetry 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