2019 electron builder 打包发布流程记录

1)npm install -g yarn

2)配置package.json

 {
  "name": "Printer",
  "version": "1.0.0",
  "description": "打印系统,专为打印设计",
  "main": "main.js",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "one",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^4.1.4",
    "electron-builder": "^20.44.4"
  },
  "dependencies": {
    "chokidar": "^2.1.5",
    "electron-store": "^3.3.0",
    "electron-workers": "^1.10.3",
    "workers": "0.0.1"
  },
  "build": {
    "appId": "com.one.Printer",
    "mac": {
      "category": "your.app.category.type"
    }
  }
}

3)进入到工程目录执行

yarn add electron-builder --dev

yarn dist

完成。

好的,下面是基于 React 和 Electron 并使用 electron-builder 进行打包的教程: 1. 创建 React 应用 首先,我们需要使用 create-react-app 工具创建一个 React 应用。在命令行中运行以下命令: ``` npx create-react-app my-electron-app ``` 这会在当前目录下创建一个名为 `my-electron-app` 的新应用。 2. 添加 Electron 接下来,我们需要在项目中添加 Electron。我们可以使用 `electron` 和 `electron-builder` 库来实现这一点。 在命令行中运行以下命令: ``` cd my-electron-app npm install --save-dev electron electron-builder ``` 3. 添加 Electron 入口文件 我们需要创建一个新文件 `public/electron.js`,这是 Electron 的入口文件。在这个文件中,我们需要引入 `electron` 模块并创建一个新的 Electron 窗口。 ```js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 这个文件创建了一个新的 Electron 窗口,并在窗口中加载了 React 应用的 `http://localhost:3000` 页面。 4. 修改 package.json 文件 我们需要修改 `package.json` 文件中的一些字段,以便 electron-builder 能够正确地打包我们的应用。 ```json { "name": "my-electron-app", "version": "0.1.0", "homepage": "./", "main": "public/electron.js", "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "build" }, "files": [ "build/**/*", "node_modules/**/*", "public/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "public/icon.icns" }, "win": { "icon": "public/icon.ico" } } } ``` 这个文件中的 `main` 字段告诉 electron-builder 我们的 Electron 入口文件在 `public/electron.js`。`build` 字段中的其他字段指定了打包的一些设置,例如应用的 ID、名称、输出目录、文件列表和图标。 5. 添加打包脚本 最后,我们需要在 `package.json` 文件中添加一个打包脚本。 ```json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "pack": "electron-builder --dir", "dist": "electron-builder" } } ``` 这些脚本中的 `pack` 脚本会在开发模式下打包应用程序,而 `dist` 脚本会在生产模式下打包应用程序。 6. 运行应用 现在,我们可以运行应用程序。在命令行中运行以下命令: ``` npm start ``` 这将启动 React 应用程序。 然后,在另一个命令行窗口中运行以下命令: ``` npm run pack ``` 这将使用 `electron-builder` 打包应用程序,并在输出目录中生成一个可执行文件。 如果您想要构建一个安装程序,您可以运行以下命令: ``` npm run dist ``` 这将打包应用程序,并在输出目录中生成一个安装程序。 这就是使用 React 和 Electron 并使用 electron-builder 进行打包的教程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值