Question

How can I package an electron application in nix, and quickly develop npm-related things in NixOs?

Answer 1

(disclamer:我根本不是一份联合材料专家,只是试图在电子包装上打上我的头盔)

TL;DR: If you only want to package, and already have an existing project, you can jump straight to the section "do the packaging part" and copy/paste the .nix file (quite simple, nothing too magic). Yet, I explain before how to develop efficiently in NixOs etc. I also made a minimal project here that you can test with:

$ nix run github:tobiasBora/basic-nix-packaging

在使用电网或外部图书馆时,没有什么事情要做。

$ nix run github:tobiasBora/basic-nix-packaging/electron-forge
$ nix run github:tobiasBora/basic-nix-packaging/using-library

How to quickly develop on NixOs

Npm/electron有一种文化,经常包装设计前的双手(例如,从安全角度来说,这并不大,而是另一个问题),它期望在例如<代码>/libld-linux-x86-64.so.2上装货。如果你在NixOs,因为NixOs公司不停地清除了装载器,以达到最大限度的再交付能力,那么这个问题就是一个问题(见更多细节和解决办法here )。我建议,如果你不想再重复,也只是沿用在任何标准班子分配上通常采用的辅导方法,那么,在您的<代码>配置中才能做到:

programs.nix-ld.enable = true;
## If needed, you can add missing libraries here. nix-index-database is your friend to
## find the name of the package from the error message, like:
## $ nix run github:mic92/nix-index-database missinglib.so
## More details: https://github.com/nix-community/nix-index-database, you might like 
programs.nix-ld.libraries = options.programs.nix-ld.libraries.default ++ (with pkgs; [
  # put here missing libraries
]);

(青年可能需要重新boot,以正确宣传环境变量)

可通过<>代码>npm。如同任何其他系统一样!

现在,你可能希望包装 ,以清洁和纯洁的方式执行你的方案,你可以安装你有利的面粉...... 让我们看看一下现在如何做到这一点。

Create an electron project (nothing interesting here)

关于这一理论,我们将在“指导上(因为我有nix-ld):

$ mkdir my-electron-app && cd my-electron-app
$ nix-shell -p nodejs_latest
$ npm init # do set an author & description, and entrypoint = main.js
$ npm install --save-dev electron

然后在<条码>条码部分添加<条码>。指挥:

{
  "scripts": {
    "start": "electron ."
  }
}

然后,在 ,特别是:

<代码>main.html:

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require( electron )
const path = require( node:path )

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname,  preload.js )
    }
  })

  mainWindow.webContents.openDevTools();
  // and load the index.html of the app.
  mainWindow.loadFile( index.html )

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on( activate , () => {
    // On macOS it s common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it s common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on( window-all-closed , () => {
  if (process.platform !==  darwin ) app.quit()
})

// In this file you can include the rest of your app s specific main process
// code. You can also put them in separate files and require them here.

<代码>index.html:

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src  self ; script-src  self ">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

www.un.org/spanish/ga/president

// preload.js

// All the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
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])
    /* replaceText(`${dependency}-version`, process.versions[dependency]) */
  }
})

Run the project (optional)

如果你只想在不测试你的软件的情况下进行包装,那么你就可以绕过这一节。

<>Method 1 如果没有安装的<代码>nix-ld<>/code>,或想最大限度地实现纯度,你不妨在此使用NixOs包装的<代码>electron。仅够:

$ nix-shell -p electron
$ electron .

该项目将启动。之后,一旦我们建立<代码>default.nix,你就可操作:

$ nix-shell
$ electron .

and it will automatically install electron (it also works if you are using external libraries)

<<>Method 2 另一方面,如果是:

$ npm start

该公司将设法操作talled电。如果你有所有图书馆安装的<代码>nix-ld,就应当工作。如果你出现这样的错误:

XXX: no such file or directory

或者说你无法在NixOs上操作双筒的错误,这很可能意味着你操作NixOs,而没有nix-ld,使(参看`How'节能够在NixOs上迅速发展,确保之后再接).)。如果是,


/tmp/electrontest/my-electron-app/node_modules/electron/dist/electron: error while loading shared libraries: libdrm.so.2: cannot open shared object file: No such file or directory

then it means that you need to install in nix-ld the package providing libdrm.so.2:
$ nix run github:mic92/nix-index-database -- libdrm.so.2 --top-level
xorg_sys_opengl.out                                   0 s /nix/store/br48s8nkd9d2y2qxzd52v9rsqhh5zrl1-xorg-sys-opengl-3/lib/libdrm.so.2
xorg_sys_opengl.out                                   0 s /nix/store/br48s8nkd9d2y2qxzd52v9rsqhh5zrl1-xorg-sys-opengl-3/lib/libdrm.so.2.4.0
libdrm.out                                            0 s /nix/store/lmqz8wx07avf4c5d0qqf0h5hwjni9yrj-libdrm-2.4.120/lib/libdrm.so.2
libdrm.out                                      110,352 x /nix/store/lmqz8wx07avf4c5d0qqf0h5hwjni9yrj-libdrm-2.4.120/lib/libdrm.so.2.4.0

在这方面,你看到你希望图书馆<代码>libdrm。 如上所示,仅添加到programs.nix-ld.enable上,并与其他图书馆保持接触(在我的测试中,我不需要在KE Plasma再设一间,但我的定位有点不同(旧版),但如果你认为你的改动没有考虑,你可能需要一个回间。 这可能是第一次停下来的,但一旦你的名单足够长,就应当为大多数方案开展工作(也许我们可以提出一套更完整的 n方案)。 在我的案件中,我特别需要补充:

      libdrm
      mesa
      libxkbcommon

(但我已经提出一个足够长的清单, 页: 1

Do the packaging (interesting part)
为包装,仅创建名为 Package.nix的文档:
# Inspired by pkgs/applications/editors/uivonim/default.nix
# and pkgs/by-name/in/indiepass-desktop/package.nix
{ lib, buildNpmPackage, fetchFromGitHub, electron }:

buildNpmPackage rec {
  pname = "my-electron-app";
  version = "0.1";

  src = ./.;

  npmDepsHash = ""; # you will get an error about mismatching hash the first time. Just copy the hash here

  # Useful for debugging, just run "nix-shell" and then "electron ."
  nativeBuildInputs = [
    electron
  ];

  # Otherwise it will try to run a build phase (via npm build) that we don t have or need, with an error:
  # Missing script: "build"
  # This method is used in pkgs/by-name/in/indiepass-desktop/package.nix
  dontNpmBuild = true;

  # Needed, otherwise you will get an error:
  # RequestError: getaddrinfo EAI_AGAIN github.com
  env = {
    ELECTRON_SKIP_BINARY_DOWNLOAD = 1;
  };
  
  # The node_modules/XXX is such that XXX is the "name" in package.json
  # The path might differ, for instance in electron-forge you need build/main/main.js
  postInstall =   
    makeWrapper ${electron}/bin/electron $out/bin/${pname} 
      --add-flags $out/lib/node_modules/${pname}/main.js
    ;

}

www.un.org/Depts/DGACM/index_french.htm 载有:
{ pkgs ? import <nixpkgs> {} }:
pkgs.callPackage ./package.nix {}

1. 建立和管理:
$ nix-build
$ ./result/bin/my-electron-app

(你将需要更新上述法典中的散列,因为你将首次拿到有效海面的错误)
欢乐!

也可以是:
$ nix-shell

并且,你会收到安装电灯的炮弹,以便你能够用电解:
$ electron .

Alternative: using electron-forge
电气化是一揽子电离应用的正式建议解决办法。 您可以准备如下项目:
$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import

在理论上,如果你想要包罗<代码>.deb或.rpm,并且有<编码>nix-ld。您能够做到:

$ nix-shell -p dpkg fakeroot rpm
$ npm run make

但是,我不知道为什么有人抱怨存在一个错误:file>/./././././././.nix/store/pryizz83lb9hvjknaqyl5f54d5bai3xd-my-electron-app-0.1”与包件的联系。

这一目标从来就是为了现在的六分之一。顺便说一句:你没有做任何事情,上述文字也为这一文字服务(我知道,如果是比较复杂的案件,它失败了)。

You can try this version also on the same repository on the electron-forge branch:

$ nix run github:tobiasBora/basic-nix-packaging/electron-forge

Yarn

如果你使用香蕉,你也可以使用<条码>mkYarnPackage,我不会尝试过,但我预计会这样做类似(即使我听说,甲草胺与九种包装不一样。

How to quickly develop on NixOs

Create an electron project (nothing interesting here)

Run the project (optional)

Do the packaging (interesting part)

Alternative: using electron-forge

Yarn

Further readings

友情链接