개시하다

예전에 "p5js로 데스크톱 프로그램 만들기 (구)1"라는 글을 썼는데 오랜만에 해 보니 아무리 해도 움직이지 않는다는 것을 알게 됐다.미안합니다.
이전 기사를 쓰는 단계에서는 일렉트론 버전에 전혀 신경 쓰지 않고 최신 버전을 사용하겠다는 의식이 있었는데, 지금 확인하면 당시에는 일렉트론 v11로 제작됐다.이후 v12에 큰 변화가 생겼습니다. 안전은 안전해졌지만 이전의 문법은 움직이지 않았습니다.
그럼 v11로 고정 제작하면 되지 않을까요? 현재 Elecron Fiddle은 v12에서만 선택할 수 있기 때문에 2021년 11월 1일까지 최신 Electron v15입니다.3.0으로 동작의 내용을 확인하고 다시 썼다.

변경점

Electron Fiddle v11은 "main.js""render.js""index.html"파일 3개를 처리했습니다.그리고 Electron Fiddlev12부터'main.js','renderer.js','index.html','preload.js'를 추가하여 4개의 파일을 처리하기 시작했다.
대략적으로 말하면 이전의 v11 이전에는'render.js'에서 다양한 일을 할 수 있었기 때문에 프로그램을 간단하게 진행할 수 있었지만 다른 한편으로는 안전성이 매우 느슨하다고 할 수 있다.따라서 새로운 v12는'render.js'와'preload.js'로 나뉘는데 안전에 영향을 미치는 처리는'proeload.js'에 쓰이고 안전에 미치는 영향은 비교적 적은 처리는'render.js'에 쓴다.
단순히 띄어쓰기만 한다고 생각했지만 큰 변경으로 노드.js에서 각종 기능 모듈을 읽는 Require는'render.js'부터 사용할 수 없고'preload.js'부터 사용할 수 있습니다.
v11까지는'render.js'에 p5js를 사용하기 위해 쓴 리퀘어('p5')가 적혀 있었지만, v12 이후에는 안 된다.다음 화면은 실제 오류입니다.

해결의 예

아직 해결 방법이 매끄럽지는 않지만, 나는 세 가지 큰 방법을 발견했다.더 좋은 방법이 있을 것 같아서 아는 사람이 있으면 알려주세요.먼저 너에게 두 가지 간단한 방법을 주고, 세 번째는 너 자신에게 채택한 방법을 준다.네 번째 방법은 시도는 했지만 순조롭지 못했다는 것이다.

예1: nodeIntefration 을 진실로 설정하고contextIsolation 을 거짓으로 설정합니다.

첫 번째 방법은 Electronv12 이후에도 v11 이전처럼 동작을 쓸 수 있다는 것이다.일렉트론의 보안 설정이 약해졌기 때문에 추천하지 않습니다.
v12에서'nodeIntegration'까지의 설정은 기본적으로'가짜', 마찬가지로'contextIsolation'의 설정은 기본적으로'진짜'입니다.이것들은main입니다.js의'webPreference'에서 설정할 수 있습니다.

실제 nodeIntegration

가짜contextIsolation

이렇게 하면 v11 때처럼'render.js'에서도 Require('p5')를 쓸 수 있다.
빠르게 컴파일하고 싶거나 자신의 로컬 환경에서 스스로 사용을 책임졌으면 좋겠다.
main.js

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,  // nodeIntegrationをtrueにして、
      contextIsolation: false // contextIsolationをfalseにする
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

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

예2:preload.모두 js에 쓰기

두 번째 방법은 프로그램의 파일을'preload.js'가 아니라'render.js'에 쓰는 것이다."preload.js"라면 Require('p5')를 사용할 수 있기 때문에 여기에 모두 쓰면 기본적으로 조작할 수 있습니다.하지만 안전성이 어떻게 될지는 잘 이해가 안 돼서 모르겠지만 어렵게 준비한'render.js'의 뜻이 없어져서 추천하지 않습니다.
preload.js

const p5 = require('p5');

const s = (p) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
  };

  p.draw = () => {
    p.background(100,10);
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  };
}
const myp5 = new p5(s);

예3:require('p5'사용하지 않음) (이것을 사용합니다)

세 번째 방법은 Require('p5')를 사용하지 않고 HTML에서'p5js'의 주체인'p5.js'와'p5.min.js'파일을 읽는 것이다.이것은 표준 p5js의 사용 방법입니다. Electron의 안전 설정도 하지 않고 "render.js"에 쓸 수 있기 때문에 지금 이게 좋다고 생각합니다.다만, 저장하거나 컴파일하기 위해 p5js 호스트를 읽어야 하기 때문에 처리가 좀 느립니다.
p5.min.js를 다운로드하여 같은 폴더에 넣습니다.그리고 index.'render.js'를 읽기 전에'p5.min.js'를 읽습니다.
index.html

    <script src="./p5.min.js"></script>
    <script src="./renderer.js"></script>

renderer.js

const s = (p) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
  };

  p.draw = () => {
    p.background(100,10);
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  };
}
const myp5 = new p5(s);

동작 이미지

예1, 예2, 예3 모두 이런 느낌으로 화면이 나왔다.

예4: 잘 안 되는 샘플

나도 해봤지만 잘 안되는 거 적어놓을게.이게 잘 풀리면 시원할 것 같아.
여기에'preload를 통해 Require를 전달할 수 있습니다'이라고 쓰여 있다.
그렇구나.'render.js'와'preload.js'에는 변수와 대상이 왕래할 수 있는 contextBridge 방법이 준비되어 있습니다.이것은 내가 그곳에서 시도해 본 방안이다.

1. 'preload.js'의'require('p5') 대상의 변수를 contextBrigde를 통해'render.js'에 전달합니다.

2. "render.js"에서 p5js의 초도를 대상 변수에 건네주고 "new"를 진행합니다.

이렇게 하려고 했지만 2에서'new'를 할 때 오류가 나서 순조롭게 진행되지 못했다.
preload.js

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld(
  "api", {
    p5: require('p5')
  }
)

renderer.js

const p5 = window.api.p5;

const s = (p) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
  };

  p.draw = () => {
    p.background(100,10);
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  };
}
const myp5 = new p5(s);

renderer.js의 "const myp5 = newp5 (s);"의 한 행에'언카우트 에러:Cannot call a class asa function'같은 오류가 발생해 여기서부터 포기할 수 없게 됐다.

사이트 축소판 그림

원래 제목에는 (구) 가 없지만 추가되었습니다.  ↩