使用 npm 安装 Electron 作为开发依赖

好的,下面是一个使用 npm packnpm install 命令来打包和安装离线版本的 npm 包的具体示例。我们将以 electron 为例,演示如何在有网络连接的机器上打包 electron,然后在没有网络连接的机器上安装它。

步骤 1: 在有网络连接的机器上打包 electron

  1. 创建一个目录: 在有网络连接的机器上,创建一个目录来存放离线包。

    复制代码
bash 复制代码
mkdir offline-packages
cd offline-packages
  • 下载 electron : 使用 npm pack 命令下载 electron 包。

bash 复制代码
npm pack electron

这会生成一个 .tgz 文件,例如 electron-33.2.0.tgz

  • 下载 electron 的依赖项electron 可能有一些依赖项,我们需要单独下载这些依赖项并打包。假设 electron 依赖于 @electron/get,我们可以使用类似的方法下载这些依赖项
bash 复制代码
npm pack @electron/get

这会生成一个 @electron/get-2.0.3.tgz 文件。
2. 复制文件 : 将生成的 .tgz 文件复制到目标机器上的某个目录,例如 E:\new\clipboard-saver\my-electron-app\offline-packages

步骤 2: 在没有网络连接的机器上安装离线包

  1. 创建项目目录: 在目标机器上,创建一个新的项目目录并初始化一个新的 Node.js 项目。
复制代码
  mkdir my-electron-app
  cd my-electron-app
  npm init -y
  • 创建 offline-packages 目录 : 在项目目录中创建一个 offline-packages 目录,并将从有网络连接的机器上复制的 .tgz 文件放入该目录。

复制代码
  mkdir offline-packages
  • 安装离线包 : 使用 npm install 命令安装离线包
复制代码
   npm install ./offline-packages/electron-33.2.0.tgz --save-dev
   npm install ./offline-packages/@electron/get-2.0.3.tgz --save-dev

步骤 3: 验证安装

  1. 检查已安装的 Electron 版本: 运行以下命令来检查已安装的 Electron 版本。
复制代码
  npx electron -v
  • 创建主进程文件 main.js : 在项目根目录下创建一个 main.js 文件,内容如下:

复制代码
  const { app, BrowserWindow } = require('electron')

  function createWindow () {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true
      }
    })

    win.loadFile('index.html')
  }

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

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

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  • 创建 HTML 文件 index.html : 在项目根目录下创建一个 index.html 文件,内容如下:

复制代码
  <!DOCTYPE html>
  <html>
  <head>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
  </html>
  • 修改 package.json : 确保 package.json 中的 scripts 部分包含启动脚本:

复制代码
  {
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "devDependencies": {
      "electron": "^33.2.0"
    }
  }
  • 运行应用: 在项目根目录下运行以下命令来启动你的 Electron 应用:
复制代码
   npm start

总结

通过以上步骤,你可以在有网络连接的机器上打包 electron 及其依赖项,然后在没有网络连接的机器上安装这些离线包并运行你的 Electron 应用。如果有任何问题,欢迎随时提问。

相关推荐
路由侠内网穿透5 小时前
本地部署开源自托管服务器监控系统哪吒监控并实现外部访问
运维·服务器·网络协议
bloglin999997 小时前
TabClaw(交互式表格分析 AI 智能体)在线下载,离线部署
linux·运维·服务器·tabclaw
云栖梦泽7 小时前
WIFI通信测试
linux·运维·服务器·压力测试
wefg17 小时前
【Linux】网络高级 IO
linux·运维·服务器
码云骑士7 小时前
为何VMware上云之路充满挑战?
运维·服务器·php
m0_738120727 小时前
渗透测试基础——一文详解JSONP跨域劫持漏洞原理与利用
服务器·安全·web安全·json
朗晴7 小时前
Linux开机重置密码时做了什么?
linux·运维·服务器
itinymeng8 小时前
在Alibaba Cloud Linux 4 LTS 64位 中安装htop
linux·运维·服务器