フロントエンドファイルを電子デスクトップアプリケーションにパッケージ化する

序文

最近デスクトップアプリケーションで作業するように手配して以来、私は長い間デスクトップで作業しておらず、少し錆びているので、知識を確認してプロセスを整理することにしました。テキストを入力してください！

文章

1.ノードプロジェクトを初期化し、package.jsonファイルを生成します

使用命令 npm init
复制代码

//package.json文件
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
复制代码

2.依存関係をプロジェクトにインストールelectron するには、次のコマンドのいずれかを使用します。

npm install --save-dev electron
cnpm install --save-dev electron
yarn add electron --dev
复制代码

3.package.jsonの構成内容は次のとおりです。

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.2"
  }
}
复制代码

4.フロントエンドプロジェクトを作成するか、フロントエンドプロジェクトを導入します。プロジェクトディレクトリの構造は次のとおりです。

--main.js
--preload.js
--index.html
--package.json
复制代码

5.公式Webサイトを参照し、main.jsエントリファイルを作成して、以下を設定します。

// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {   
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口
  const win = new BrowserWindow({
    //width: 800,   //窗口宽度,单位像素. 默认是 800
    //height: 600,  //窗口高度,单位像素. 默认是 600
    icon: './logo.ico', // 设置窗口左上角的图标
    show: false, //窗口创建的时候是否显示. 默认为 true
    webPreferences: {
      nodeIntegration: true, // 是否完整支持node。默认为 true
      preload: path.join(__dirname, 'preload.js')  //界面的其它脚本运行之
      前预先加载一个指定脚本。
    }
  })
  // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
  win.maximize()
  win.show()
  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
复制代码

6.preload.jsを作成します。すべてのNode.jsAPIをプリロードプロセスで使用して、以下を構成できます。

// preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
复制代码

7. main.jsでの生活のwin.loadFile（'index.html'）と一致するindex.htmlファイルを作成します

8.コマンドnpmstartを実行して、Webアプリケーションをすばやく開き、アプリケーション構成の内容が正しいかどうかを確認します。

9.パッケージの依存関係をインストールするには、次の2つの方法をお勧めします：electron-packagerとelectron-builder

ロン、電子パッケージャー

①electron-packagerを使用して、electron-packager依存関係をパッケージ化し、インストールし、次のいずれかをインストールします。

npm install --save-dev electron-packager
cnpm install --save-dev electron-packager
yarn add electron --dev
复制代码

②インストールが成功したら、package.jsonファイルを設定する必要があります。設定は次のとおりです。

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },
复制代码

パッケージャーパラメーターの紹介：

- platform：设置平台，window，linux还是Mac
- arch：x84还是x64，
- outapp的位置可以替换成你打包后的exe名字
- electron-version：electron的版本，必须要指定，这里设置为1.6.2，可查看package.json中electron安装的版本号
- icon 图标地址
复制代码

③コマンドnpmrunpackagerを実行すると、正常に動作した後、プロジェクトのルートディレクトリにビルドファイルが表示され、exeファイルを実行してパッケージ化されたプロジェクトが表示されます。

二、電子ビルダー

①electron-builderを使用して、electron-builder依存関係をパッケージ化し、インストールし、次のいずれかをインストールします。

npm install  electron-builder --save-dev
cnpm install  electron-builder --save-dev
yarn add electron-builder --dev
复制代码

②インストールが成功したら、package.jsonファイルを設定する必要があります。設定は次のとおりです。

{
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
 // 使用electron-builder打包需要配置"build"
 "build": {
      "productName":"xxxx",   // 项目名称
      "appId": "electron.app",  // 安装包名称
      "directories": { 			
        "output": "build"
      }, // 输出文件夹
      "copyright":"xxxx", // 版权信息
      "nsis": {	//nsis相关配置，打包方式为nsis时生效
        "oneClick": false, 				// 是否一键安装
        "allowElevation": true, 			// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico",	// 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico",	// 卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, 			// 创建桌面图标
        "createStartMenuShortcut": true,		// 创建开始菜单图标
        "shortcutName": "xxxx", 			// 图标名称
        "include": "build/script/installer.nsh", 	// 包含的自定义nsis脚本
      },
      // 发布到github
      publish: {
        provider: 'github',
        repo: 'xxxx', // git仓库
        owner: 'xxxx', // 拥有者
        token: 'xxxxxxxxxxxxxxx', // gitToken
        releaseType: 'release',
        publishAutoUpdate: true // 发布自动更新（需要配置GH_TOKEN）。 默认true
      },
      //配置windows环境
      "win": {
        "icon": "build/icons/aims.ico",
        "target": ["nsis","zip"]
      },
      //配置mac环境
      "mac": {
        "target": ["dmg","zip"]
      },
      //配置linux环境
      "linux": {
        "icon": "build/icons"
      }
  }
}
//来自：https://segmentfault.com/a/1190000016695922?utm_source=tag-newest
复制代码

③コマンドnpmrunbuildを実行します。操作が成功すると、プロジェクトのルートディレクトリにビルドファイルが表示されます。exeファイルを実行して、パッケージ化されたプロジェクトを表示します。

単純なデスクトップアプリケーションが生成されます。

要約する

この記事では、electronのインストールプロセスについて簡単に説明し、デスクトップアプリケーションに正常にパッケージ化しました。まだ示されていない詳細な情報がたくさんあります。Pingtou兄弟は今後も詳細を共有していきます。