使用 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 应用。如果有任何问题,欢迎随时提问。

相关推荐
青梅橘子皮1 小时前
Linux---基本指令
linux·运维·服务器
cui_ruicheng2 小时前
Linux进程间通信(三):System V IPC与共享内存
linux·运维·服务器
运维全栈笔记3 小时前
Linux安装配置Tomcat保姆级教程:从部署到性能调优
linux·服务器·中间件·tomcat·apache·web
dllmayday4 小时前
Linux 上用终端连接 WiFi
linux·服务器·windows
ACP广源盛139246256734 小时前
IX8024与科学大模型的碰撞@ACP#筑牢科研 AI 算力高速枢纽分享
运维·服务器·网络·数据库·人工智能·嵌入式硬件·电脑
峥无5 小时前
Linux系统编程基石:静态库·动态库·ELF文件·进程地址空间全景图
linux·运维·服务器
lzhdim7 小时前
SQL 入门 12:SQL 视图:创建、修改与可更新视图
java·大数据·服务器·数据库·sql
2401_873479407 小时前
断网时如何实时判断IP归属?嵌入本地离线库,保障风控不中断
运维·服务器·网络
草履虫君10 小时前
VMware 虚拟机网络性能优化指南:从 11 秒到 4 秒的完整调优实践
服务器·网络·经验分享·性能优化
日取其半万世不竭10 小时前
LVM 逻辑卷管理:不停机扩容磁盘的正确方式
运维·服务器