electron-vue-vite

Electron + vue3 + vite 整合

简书地址

How and Why

写这个 Demo 项目主要有两个目的
1. vue@3.x 发布了，想试试新功能
2. 工作中用的 umi+electron 项目大了，启动速度并不理想；用 vite 试试，算一个储备方案 ^_^

Command

npm run dev
npm run build

Note `踩坑记`

import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import
const { write } = require('fs') 这种形式就能用了 😉
const { ipcRenderer } = require('electron') 同理

虽然开发期可以用 require 避开 vite 的编译问题，但是打包时候 rollup 那边又出了问题；

拿 const Store = require('electron-store') 举例，在 vite.config.ts 中通过自定义 rollup 插件转换成 EMS 形式即可

  // 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
      },
    }
  ],

"rollup-plugin-esbuild": "^2.4.2", 有 BUG 21-02-18

tsconfig.json中不能有多余的逗号，不然有如下警告 21-02-18

 SyntaxError: Unexpected token ] in JSON at position 428
    at JSON.parse (<anonymous>)
    at Object.load (/Users/caoxie/Desktop/github/electron-vue-vite2/node_modules/rollup-plugin-esbuild/dist/index.js:21:17) {
  code: 'PLUGIN_ERROR',
  plugin: 'esbuild',
  hook: 'transform',
  id: '/Users/caoxie/Desktop/github/electron-vue-vite2/src/main/index.ts',
  watchFiles: [
    '/Users/caoxie/Desktop/github/electron-vue-vite2/src/main/index.ts'
  ]
}

main 进程中暂时无法用 require，打包后会导致模块找不到 21-02-18
"asar": false 这样可以保障 "extraResources" 能够正常搬运到文件夹中 21-02-18

总结

2019 款 13 寸 mac-pro 启动速度 4秒左右
奔腾 G4560 台机 CUP 神舟笔记本启动速度 6 秒左右
毋庸置疑 vite 的方案比起 @vue/cli、umi、create-react-app 这类基于 webpack 的脚手架启动这块的优势大的多滴多
技术总是飞快的迭代、进步，目的都是解决一些已经存在、或即将到来的问题；继续治疗、学习起来、加油哇~

2.8 KiB Raw Blame History Unescape Escape

electron-vue-vite

简书地址

How and Why

Command

Note 踩坑记

总结

2.8 KiB

Raw Blame History

Note `踩坑记`