使用 snowpack, vue 和 electron 创建桌面应用程序
Posted 程序猿研究所
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 snowpack, vue 和 electron 创建桌面应用程序相关的知识，希望对你有一定的参考价值。
snowpack 3.0 版本已经发布有一段时间了， snowpack 是类似于 webpack 的 js 项目打包，编译工具，但是相对于 webpack， snowpack 开箱即用，对目前市面上比较 流行对框架都有预设模版，并且编译打包速度比 webpack 快很多。
因为 snowpack 对很多框架都是开箱即用的，所以像 react， vue ，preact， svelte 只要查看这个文档即可：https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/cli
这里介绍一下如何通过 snowpack 的 vue 项目创建 electron 桌面程序，同理可应用于 snowpack 支持的其他框架。
1. 安装 snowpack， 建立项目
首先需要通过 snowpack 创建一个 Vue 项目， 这个很简单：
npx create-snowpack-app desktopapp --template @snowpack/app-template-vue --use-yarn
创建完成之后进入应用目录，执行 yarn start, 就可以通过浏览器查看项目。
2. 安装 electron
接下来安装 electron， 这个也很简单：
npm i --save-dev electron
3. snowpack 项目适配 electron
我们执行一下
yarn build
就可以看到 vue 项目最终打包的目录， 在 build 文件夹下， 然后需要在项目目录下创建一个 main.js 文件：
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('build/index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
这里的 win.loadFile 更改为项目的打包目录。然后修改 public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-snowpack-app" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Snowpack App</title>
</head>
<body>
<div id="app"></div>
<noscript>You need to enable javascript to run this app.</noscript>
<script type="module" src="dist/index.js"></script>
</body>
</html>
这里尤其需要注意的是 Content-Security-Policy 和 js css 的加载路径，这里改成相对文件的路径，而不是 url 的相对路径。添加信息:
{
"name": "desktop-app",
"version": "0.0.1",
"author": "nobody",
"description": "a desktop app based electron.",
"main": "main.js",
"scripts": {
"start": "snowpack dev",
"build": "snowpack build",
"test": "echo \"This template does not include a test runner by default.\" && exit 1"
},
"dependencies": {
"vue": "3.0.0"
},
"devDependencies": {
"@snowpack/plugin-dotenv": "^2.0.5",
"@snowpack/plugin-vue": "^2.3.0",
"electron": "^12.0.0",
"snowpack": "^3.0.1"
}
}
4. 打包和分发应用
使用 Electron Forge 来打包和分发应用程序，添加和导入 Electron Forge ：
npx @electron-forge/cli import
导入完成之后 package.json 会进行更新，我们将里面的 start 脚本修改为：
"start": "snowpack build && electron-forge start",
<img src="logo.svg" class="App-logo" alt="logo" />
再重新运行即可正常显示。
在 electron 里面包含了 node 的环境，因此在 vue 项目中可以执行 node 的 api， 比如使用 got js 来进行 http 请求，它封装的是 node 的 net 模块，而非前端的 fetch 或者 xhr 。
以上是关于使用 snowpack, vue 和 electron 创建桌面应用程序的主要内容，如果未能解决你的问题，请参考以下文章
第1991期替代 webpack？带你了解 snowpack 原理
尝试将 css 模块与 react 和 snowpack 一起使用时出现运行时错误
如何将 Routify 与 Snowpack 和 Svelte 一起使用