diff --git a/README.md b/README.md index 57b5f4e..35a0c3f 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,10 @@ Electron、vue、vite 整合 1. `vue@3.x` 发布了，想试试新功能 2. 工作中用的 `umi`+`electron` 项目大了，启动速度并不理想；用 `vite` 试试，算一个储备方案 ^_^ +## cmd +- npm run dev +- npm run build + --- -![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/master/screenshot/main-white.png) - -![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/master/screenshot/cmd.png) +![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/master/screenshot/800x600.png) diff --git a/blog.md b/blog.md new file mode 100644 index 0000000..9511942 --- /dev/null +++ b/blog.md @@ -0,0 +1,249 @@ +# Electron + vue3 + vite 整合 + +- 伴随着 `vue3` 的发布，vue 全家桶又添新成成员 ——`vite` 脚手架工具；相比 `@vue/cli` 基于浏览器内置的 ES module 极快的冷启动速度、基于 `Rollup` 打包的配置更简单(确实简单)； +`vite` 底层原理网上已有好多文章，本文主要讲使用 + +- 公司的项目用的整合方案是 `umi` + `electron` ，umi 是我用过目前最傻瓜化的框架了，你能想到的她都做了而且还是自动化的 👍 +唯一一点不大好的 umi 的构建速度较慢； +vite 冷启动速度确实让人眼前一亮，索性拿来和 electron 集成一波；算是一个技术备选方案 `^_^` + +> 毕竟 ****尤大出品，必是精品**** 定律嘛！ + +![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/master/screenshot/800x600.png) + + +#### 准备材料 +- `vue3` +- `vite` vue3 脚手架 +- `electron` +- `electron-builder` electron 构建工具 +- `electron-connect` 主进程代码修改热重启 +- `rollup` 之前写过一个偏文章 [Electron、webpack、react、typescript 从零开始搭积木](https://www.jianshu.com/p/3aafab67ff70) + * 一来能少装个包，vite 用的也是 rollup —— 入乡随俗 + * 二来 rollup 的配置比 webpack 简单又专注于 js 的打包；只是用来打包 electron 主进程代码确实方便 +- `concurrently` 同时启动 vite(渲染进程)、electron(主进程) +- `wait-on` 用于监听 vite 启动，随后拉起 electron 启动 +- `chalk` 命令行文字颜色、背景色 +- `ora` 命令行友好提示 +- `minimist` 命令行参数解析 +- `dotenv` 解析 .env 文件 + +#### 目录结构 +```tree +. +├─dist 打包后的文件夹 +├─screenshot +├─script +│ ├─build.js 主进程构建文件 +│ └─rollup.config.js 主进程构建配置 +└─src + ├─main + │ └─index.ts 主进程入口文件 + └─render + ├─assets + ├─components + ├─dist vue 打包后目录 + │ _assets + ├─public + ├─App.vue + ├─index.css + ├─index.html + └─main.js 渲染进程入口文件 +└─.env 配置文件 +``` + +#### 主进程构建配置 + +> script/rollup.config.js + +- `@rollup/plugin-node-resolve` 支持引入 `node_modules` 模块 +- `@rollup/plugin-commonjs` 支持 `require`、`module.exports` 写法 +- `@rollup/plugin-typescript` 支持 `typescript` + +```javascript +const path = require('path'); +const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const commonjs = require('@rollup/plugin-commonjs'); +const typescript = require('@rollup/plugin-typescript'); + +module.exports = (env = 'production') => { + return { + input: path.join(__dirname, '../src/main/index.ts'), // 入口文件 + output: { + file: path.join(__dirname, '../src/main/_.js'), // 输出目标 + format: 'cjs', // CommonJs 格式 + name: 'ElectronMainBundle', // 模块名称(可选) + sourcemap: true, + }, + plugins: [ + nodeResolve({ jsnext: true, preferBuiltins: true, browser: true }), // 支持引入 node_modules 模块 + commonjs(), // 支持 CommonJs 规范 + typescript(), // 支持 TypeScript + ], + external: [ + // 告诉 rollup 碰到下面模块时候不要去打包 + 'fs', + 'path', + 'http', + 'https', + 'child_process', + 'os', + 'electron', + ], + } +}; +``` + +#### 主进程构建脚本 + +> script/build.js + +- 实现思路: 使用 `wait-on` 监听 `vite` 启动，然后拉起 `electron` 打开渲染进程加载 vue 应用 +- `rollup` 使用比较简单 + * 如果是开发模式用 `rollup.watch(options)` 会监听文件变化，文件改变自动重新编译 + * 如果只是构建使用 `rollup.rollup(options)` 只会执行一次构建 + +```javascript +/** + * electron 打包 + */ +const path = require('path'); +const rollup = require('rollup'); +const argv = require('minimist')(process.argv.slice(2)); +const chalk = require('chalk'); +const ora = require('ora'); +const waitOn = require('wait-on'); +const electron = require('electron-connect').server.create({ stopOnClose: true }); // 表示要操作主进程端(对应的还是渲染进程端；渲染进程用的 vite 热更新) +require('dotenv').config({ path: path.join(__dirname, '../.env') }); // 解析项目根目录下的 .env 文件 +const options = require('./rollup.config'); // 引入 rollup 配置 + +const opt = options(argv.env); +const TAG = '[script/build.js]'; +const spinner = ora(`${TAG} Electron build...`); + +if (argv.watch) { // 开发模式 (命令行传入 --watch 标识) + waitOn({ + resources: [`http://localhost:${process.env.PORT}`], // 等待 vite 服务器启动，然后拉起 electron + log: false, + }, err => { + if (err) { + console.log(err); + process.exit(1); + } + + // once here, all resources are available + const watcher = rollup.watch(opt); + watcher.on('change', filename => { + const log = chalk.green(`change -- ${filename}`); + console.log(TAG, log); + }); + watcher.on('event', ev => { + if (ev.code === 'END') { + // init-未启动、started-第一次启动、restarted-重新启动 + electron.electronState === 'init' ? electron.start() : electron.restart(); + } + }); + }); +} else { // 构建模式 + spinner.start(); + rollup.rollup(opt) + .then(build => { + spinner.stop(); + console.log(TAG, chalk.green('Electron build successed.')); + build.write(opt.output); + }) + .catch(error => { + spinner.stop(); + console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n'); + }); +} +``` + +#### 渲染进程 vite 配置 + +> vite.config.ts + +- 需要改变 `vite` 的构建路径，因为 vue 代码移动到了 `src/render` 下 +- 通过 `.env` 配置启动端口，配合主进程监听端口启动 + +```typescript +/** + * 参考链接: https://github.com/vitejs/vite/blob/master/src/node/config.ts + */ +import { join } from 'path' +import { UserConfig } from 'vite' +import dotenv from 'dotenv' + +dotenv.config({ path: join(__dirname, '.env') }) + +const config: UserConfig = { + // vite 项目编译、启动的根目录 + // 默认指向项目跟目录，我们把 vue(渲染进程) 代码全部搬到 src/render 下 + root: join(__dirname, 'src/render'), + // 通过 .env 配置端口，能够让 electron 加载到正确的地址 + port: +process.env.PORT, + // 打包后的 vue 项目引入 js、css、favicon 等资源路径 + base: './', +} + +export default config +``` + +#### 启动脚本配置 + +```json +{ + "main": "src/main/_.js", + "scripts": { + "dev": "npm run dev:all", + "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run dev:vue\" \"npm run dev:ele\"", + "dev:vue": "vite", + "dev:ele": "node script/build --env=development --watch", + "build:vue": "vite build", + "build:ele": "node script/build --env=production", + "build": "npm run build:vue && npm run build:ele && electron-builder" + } +} +``` + +- main `electron` 启动后会加载 main 配置的文件 +- dev:all 使用 `concurrently` 同时启动 `dev:vue`、`dev:ele` +- dev:ele `electron` 开发模式脚本，通过传入 `--watch` 表示 rollup 监听主进程变化自动编译 +- build 使用 `electron-builder` 打包 + +#### 启动一下试试 +```bash +$ yarn dev + +yarn run v1.22.4 +$ npm run dev:all + +> electron-vue@0.0.1 dev:all D:\github\electron-vue-vite +> concurrently -n=vue,ele -c=green,blue "npm run dev:vue" "npm run dev:ele" + +[ele] +[ele] > electron-vue@0.0.1 dev:ele D:\github\electron-vue-vite +[ele] > node script/build --env=development --watch +[ele] +[vue] +[vue] > electron-vue@0.0.1 dev:vue D:\github\electron-vue-vite +[vue] > vite +[vue] +[vue] vite v1.0.0-rc.4 +[vue] +[vue] Dev server running at: +[vue] > Network: http://192.168.1.9:3344/ +[vue] > Network: http://192.168.119.1:3344/ +[vue] > Network: http://10.0.60.32:3344/ +[vue] > Local: http://localhost:3344/ +[vue] +[ele] [2020-08-17T08:57:11.850Z] [electron-connect] [server] started electron process: 1488 +[ele] [2020-08-17T08:57:11.851Z] [electron-connect] [server] server created and listening on 30080 +[ele] +``` + +#### 尾巴 +- 2019 款 13 寸 mac-pro 启动速度 4秒 左右 +- 奔腾 G4560 台机 CUP 神舟笔记本启动速度 6 秒左右 +- 毋庸置疑 vite 的方案比起 @vue/cli、umi、create-react-app 这类基于 webpack 的脚手架启动这块的优势大的多滴多 +- 技术总是飞快的迭代、进步，目的都是解决一些已经存在、或即将到来的问题；继续治疗、学习起来、加油哇~ diff --git a/package.json b/package.json index 2faa5a8..1e55b1d 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,43 @@ "license": "MIT", "scripts": { "dev": "npm run dev:all", - "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run vue:dev\" \"npm run ele:dev\"", - "vue:dev": "vite", - "vue:build": "vite build", - "ele:build": "node script/build --env=production", - "ele:dev": "node script/build --env=development --watch" + "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run dev:vue\" \"npm run dev:ele\"", + "dev:vue": "vite", + "dev:ele": "node script/build --env=development --watch", + "build:vue": "vite build", + "build:ele": "node script/build --env=production", + "build": "npm run build:vue && npm run build:ele && electron-builder" + }, + "build": { + "appId": "308487730@qq.com", + "files": [ + "!node_modules", + "src/main/**", + "src/render/dist/**" + ], + "mac": { + "artifactName": "${productName}_setup_${version}.${ext}", + "target": [ + "dmg" + ] + }, + "win": { + "target": [ + { + "target": "nsis", + "arch": [ + "x64" + ] + } + ], + "artifactName": "${productName}_setup_${version}.${ext}" + }, + "nsis": { + "oneClick": false, + "perMachine": false, + "allowToChangeInstallationDirectory": true, + "deleteAppDataOnUninstall": false + } }, "dependencies": { "vue": "^3.0.0-rc.8" @@ -39,4 +71,4 @@ "vue3", "rollup" ] -} +} \ No newline at end of file diff --git a/screenshot/800x600.png b/screenshot/800x600.png new file mode 100644 index 0000000..ecd4949 Binary files /dev/null and b/screenshot/800x600.png differ diff --git a/src/render/App.vue b/src/render/App.vue index be70e71..12d83b4 100644 --- a/src/render/App.vue +++ b/src/render/App.vue @@ -3,7 +3,7 @@ Electron logo Vue logo - +