Electron快速入门官网一、Hello World 1. 安装electron 官网安装文档 npm instal

一、Hello World

1. 安装electron

官网安装文档 npm install --save-dev electron@version

镜像安装

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
ELECTRON_CUSTOM_DIR="{{ version }}"
ELECTRON_USE_REMOTE_CHECKSUMS=1 // 设置为 Electron 使用远程 SHASUMS256.txt 文件来验证校验

npm install --save-dev electron@9.4.4

离线安装

下载离线版本，运行命令npm install --save-dev electron@version 执行到node install.js时，ctr + c结束运行将下载的electron离线文件electron-v9.3.0-darwin-x64.zip放到路径 node_modules/electron/下找到node_modules/electron/install.js 文件里面的downloadArtifact方法，改成如下的代码

// downloads if not cached
extractFile('./electron-v9.4.0-darwin-x64.zip')

// downloadArtifact({
//   version,
//   artifactName: 'electron',
//   force: process.env.force_no_cache === 'true',
//   cacheRoot: process.env.electron_config_cache,
//   platform: process.env.npm_config_platform || process.platform,
//   arch: process.env.npm_config_arch || process.arch
// }).then(extractFile).catch(err => {
//   console.error(err.stack)
//   process.exit(1)
// })

在node_modules/electron路径下打开终端，运行node install.js, 安装成功在项目根目录下运行 npx electron --version 查看版本

2. 创建文件index.html, main.js

index.html

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>

main.js 注意在package.json中指定入口文件 "main": "main.js"

// main.js
const path = require('path')
const { app, BrowserWindow } = require('electron')

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    win.loadFile('index.html')
}


app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

3. 启动应用

在package.json scripts中加运行命令或者直接运行npx electron . 注意： webpack打包文件时，指定target为 electron-renderer webpack.docschina.org/configurati…

二、打包应用程序

electron-forge，electron-builder， electron-packager

1. electron-forge

npm install --save-dev @electron-forge/cli npx electron-forge import // 使用其"import"命令设置 Forge 的脚手架官方文档使用make命令打包应用程序 npm run make 打包成功后应用程序会在out文件夹下