앞말

최근react를 배우고 있습니다. 그림을 압축하는 클라이언트 도구를 개발하여 연습하려고 합니다. 그래서 electron의 학습을 시작했습니다. 이 과정에서 구덩이를 만났습니다. 이것을 기록합니다.

브라우저 환경에서 nodejsapi 사용하기

개발은react를 결합했기 때문에 웹 팩을 사용할 것입니다. 디버깅 환경에서 electron이 여는 것은 웹 팩이 제공하는 서버 주소입니다.

// Create the browser window.
    mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false } })
    mainWindow.setMinimumSize(800, 600)
    mainWindow.webContents.openDevTools()

    // and load the index.html of the app.
    //   mainWindow.loadFile('index.html')
    mainWindow.loadURL('http://127.0.0.1:3000')

따라서react 프로젝트에서 require nodejs의 원본 패키지를 직접 사용하면 실행 오류가 발생합니다. nodejs 원본 패키지가 많은 베이스api를 호출하기 때문에 브라우저가 당연히 이 권한을 주지 않기 때문에 브라우저에서 nodejs의api를 사용하려면 아래와 같은 방식으로 원본 Nodejs 패키지를 도입해야 합니다.

const electron = window.require('electron')
const process = window.require('process')
const fs = window.require('fs')
const Https = window.require('https')

electron은 nodejsapi를 윈도우즈 대상에 마운트하여 밑바닥과 통신하기 때문에 윈도우즈의require 함수를 호출하여 nodejs 패키지를 도입해야 합니다.

브라우저 환경에서 앱 객체 사용하기

electron 메인 프로세스에서 앱 대상을 사용하여 electron을 직접 요구하면 됩니다.

const { app } = require('electron')

그러나 렌더링 프로세스에서 앱 객체를 사용하려면 다음과 같이 입력해야 합니다.

const electron = window.require('electron')
const app = electron.remote.app

하하, 모르면 얼떨떨하지.

브라우저 환경에서 제3자 nodejs 패키지 사용하기

브라우저에서require 제3자 nodejs 패키지는 틀림없이 오류가 발생할 것입니다. 따라서 윈도우를 만들어야 할 때 제3자 의존 패키지를 미리 도입합니다. 코드는 다음과 같습니다.

// main.js
mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
        webSecurity: false,
        preload: path.resolve(__dirname, './public/renderer.js')
    },
})

// ./public/renderer.js
global.imagemin = require('imagemin')

// window 
const imagemin = window.imagemin

패키지 후 바이너리 파일을 실행할 수 없습니다.

이 그림 압축 도구는 imagemin이라는 npm 패키지를 사용했습니다. 개발할 때 그림을 압축하는 데 아무런 문제가 없지만 electron 패키지를 통해 그림을 압축하면 오류가 발생합니다. 그림과 같습니다.
처음에 나는 어리둥절했다. 왜냐하면 이것은 효과적인 오류 정보를 볼 수 없기 때문이다. 그러나 원본 코드를 읽고 인터넷에서 해결 방안을 찾았기 때문에 결국 실마리를 발견했다.debugger 과정에서 imagemin은 2진 실행 파일을 사용하여 그림을 압축하는 것을 발견했고 2진 실행 함수는child_process.spawn, 이 함수는 파일 경로에 제한이 있습니다.electron을 포장한 후 의존항을 하나의 파일로 압축하여 이 함수 판단 경로가 틀렸기 때문입니다. 이 문제에 대해 자신의 코드에 2진 파일을 사용했다면child_process.spawn에서 child로 교체_process.execFile 함수로 바이너리 파일을 실행합니다.
그러나 제가 인용한 것은 다른 사람의 가방입니다. 만약에 비본원적인 가방을 제멋대로 수정하면 프로젝트가 다른 환경에서 실행되지 못할 수 있기 때문에 예외적인 해결 방안을 찾아야 합니다. 황천은 고심하지 않고 마침내 해결 방안을 찾았습니다. 그것이 바로 전자가 포장할 때 의존항을 압축하지 않으면 정확한 경로를 얻을 수 있습니다.

솔루션

패키지를 수정합니다.json의build 옵션입니다. 이 옵션은 electron에 대한 일련의 설정입니다.그 중의 asar를false로 수정하면 electron이 포장할 때 의존하지 않고 압축할 수 있습니다. 아래와 같습니다.

"build": {
    "appId": "com.richard.image_compress",
    "mac": {
      "category": "tool"
    },
    "extends": null,
    "files": ["build", "*.js", "public"],
    "asar": false
}

끝소리

이 일련의 구덩이를 기어오르면서 그림 압축의 클라이언트 도구가 마침내 완성되었다.
git repo: github.com/Richard-Cho…