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

ops/2024/11/22 13:44:47/

好的，下面是一个使用 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"}
}