Bootstrap

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

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

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

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

     
  • mkdir offline-packages
    cd offline-packages
  • 下载 electron: 使用 npm pack 命令下载 electron 包。

  • npm pack electron

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

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

  1. 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 命令安装离线包

  1. 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 应用:

  1. npm start

总结

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

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;