当前位置：首页 > article >正文

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

article 2024/11/22 22:29:33

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

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

创建一个目录：在有网络连接的机器上，创建一个目录来存放离线包。

mkdir offline-packages
cd offline-packages

下载 electron 包：使用 npm pack 命令下载 electron 包。
```
npm pack electron
```
这会生成一个 .tgz 文件，例如 electron-33.2.0.tgz。
下载 electron 的依赖项： electron 可能有一些依赖项，我们需要单独下载这些依赖项并打包。假设 electron 依赖于 @electron/get，我们可以使用类似的方法下载这些依赖项

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

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

创建项目目录：在目标机器上，创建一个新的项目目录并初始化一个新的 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: 验证安装

检查已安装的 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"
  }
}