M1 MacBook에서 Electron 앱을 만들었습니다만, Rosetta를 사용해 열기에 체크를 한 Terminal로 Node.js 환경을 구축하고 있기 때문인지, Electron 앱도 Intel 모드가 되어 버렸습니다. 거기서, Apple Silicon 네이티브로 움직일 수 없는지 조사해 본 이야기입니다.

샘플 작성

공식 단계에 따라 만듭니다.

적절한 폴더를 만든다.

npm init -y 를 두드려 package.json을 작성.

main.js 와 index.html 를 공식에서 복사하여 폴더 바로 아래에 작성.

electron & electron-builder 설치

electron-builder는 다음을 참고하여 Pre-release 버전을 설치합니다.

npm i -D electron
npm i -D [email protected]

package.json 편집

+가 붙어 있는 부분을 추가합니다. "main"이 main.js가 아니면 main.js로 설정하십시오.

{
  "name": "適当なフォルダ名",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
+    "start": "electron .",
+    "build": "electron-builder --dir",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.1",
    "electron-builder": "^22.10.4"
+  },
+  "build": {
+    "mac": {
+      "target": {
+        "target": "dir",
+        "arch": "universal"
+      }
+    }
  }
}

동작 확인

npm start 에서 먼저 움직이는지 확인합니다.

패키지 작성 및 시작

npm run build 를 실행하면 dist/mac/ 라는 폴더 아래에 패키지가 만들어지므로 Finder에서 두 번 클릭하여 시작합니다.

활동 모니터를 열어 아키텍처를 확인해 봅니다.

어라?　Intel 그대로? 웃긴...

.
.
.

설치 한 Node.js가 Apple Silicon을 지원하지 않는 v14.15.x임을 알았습니다.

Node.js v15.x 설치

후반부 "v15.x 설치 (2020/12/26 추가)"에 따라 설치합니다.

다시, 패키지 생성 및 시작

다시 npm run build를 실행하면 이번에는 dist/mac-arm64/라는 폴더가 있습니다. Finder에서 시작한 후 활동 모니터를 보면 제대로 Apple에서 작동했습니다.

이상