From 03528a8de4b863f1809c7d9484e62e77455bdc73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Mon, 5 Oct 2020 21:48:49 +0800 Subject: [PATCH] UPDATE --- README.md | 39 +++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1032b4b..ce4f4a3 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,52 @@ # electron-vue-vite -Electron、vue、vite 整合 +`Electron` + `vue3` + `vite` 整合 + +#### [简书地址](https://www.jianshu.com/p/ee5ec23d4716) ## How and Why - 写这个 Demo 项目主要有两个目的 1. `vue@3.x` 发布了,想试试新功能 - 2. 工作中用的 `umi`+`electron` 项目大了,启动速度并不理想;用 `vite` 试试,算一个储备方案 ^_^ + 2. 工作中用的 `umi`+`electron` 项目大了,启动速度并不理想; + 用 `vite` 试试,算一个储备方案 ^_^ -## cmd +## 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 形式即可 + ```javascript + // 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 + }, + } + ], + ``` + +## 总结 + +- 2019 款 13 寸 mac-pro 启动速度 4秒 左右 +- 奔腾 G4560 台机 CUP 神舟笔记本启动速度 6 秒左右 +- 毋庸置疑 vite 的方案比起 @vue/cli、umi、create-react-app 这类基于 webpack 的脚手架启动这块的优势大的多滴多 +- 技术总是飞快的迭代、进步,目的都是解决一些已经存在、或即将到来的问题;继续治疗、学习起来、加油哇~ ---