Electron을 시작하는 방법 on Mac

10832 단어 Electron자바스크립트Node.js

Electron 설치


$ npm -g install electron-prebuilt

실패하면 다음을 시도하십시오 (node.js의 최신 버전 설치)
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド

참고 : htps : // 이 m / 요시자키 _ kgk / ms / 9711c26에 71522 d289

앱 만들기



공식 사이트에서 소개된 샘플을 다운로드할 수도 있음


$ git clone https://github.com/electron/electron-quick-start

스스로 처음부터 만드는 경우는 아래의 순서


$ take myfirstapp #take = mkdir + cd
$ npm init

package.json
{
  "name": "myfirstapp",
  "version": "1.4.13",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

main.js

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

function createWindow () {
  // ブラウザウインドウの作成
  win = new BrowserWindow({width: 800, height: 600})

  // アプリの index.html を読み込む
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
}

app.on('ready', createWindow)

index.html
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
      <h1>Hello World!</h1>
      node <script>document.write(process.versions.node)</script>、
      Chrome <script>document.write(process.versions.chrome)</script>、
      Electron <script>document.write(process.versions.electron)</script>を使用しています。
    </body>
  </html>

디렉토리 구성
PythonApp
├── index.html
├── main.js
└── package.json

앱 실행


//どちらでもok
$ npm start
$ electron .

문제가 없으면 이러한 앱이 시작됩니다.

Mac


Windows


참고 : htps : // 코 m / 요시자키 _ kgk / ms / 9711c26 71522 d289
참고 : htps : // / ぇct 롱 js. 오 rg / cs / thor l / fu rst - p

unable to find Electron app at/Users/.... 라고 나오면...
"main":"main.js"부분에 존재하지 않는 파일 이름을 작성했을 수 있습니다.

package.json
#存在してないファイル名を書いてる可能性あり
"main": "main.js"

참고 : htps : // 코 m / 굉장히 우키시 / ms / 169048 df54855 에 75 777

파일을 팩하는 경우



asar는 압축하지 않고 여러 파일을 하나의 파일로 만듭니다.

// asarをインストール
$ npm install -g asar 

//アーカイブの作成
$ asar pack myfirstapp archive.asar

//アーカイブの展開
$ asar extract archive.asar output

참고 : htps : // 이 m / 니혼 ds / ms / 2739fdbc26df03421b

앱 배포



electron-packager 설치
$ npm i electron-packager -g

Mac에서 Windows 용 패키징을 위해서는 "wine"이 필요합니다.
//wine をインストールするために必要
$ brew cask install xquartz

$ brew install wine
$ brew install winetricks # これをインストールしないと、wineのupdateメッセージが出たまま消えなくなって詰まる。

Mac 및 Windows용으로 패키징하는 경우
$ electron-packager myfirstapp --platform=darwin,win32 --arch=x64 --electronVersion=1.4.13

인수 설명
-platform ... all, linux, win32, darwin 중 하나를 선택합니다. 여러 개 넣는 경우 쉼표로 구분
-arch ... all, ia32, x64 중 하나를 선택합니다.
-electronVersion ... Electron 버전 (1.4.13)을 지정합니다. (2018.4.5 현재 최신)

문제가 없으면 다음 디렉토리가 만들어집니다.
myfirstapp-darwin-x64
myfirstapp-win32-x64

참고 : htps : // 코 m / 짱 / ms / 15d514d9b9f87에 5c0 아 29
React Native for Web을 Electron으로 이동
Electron에서 Mac 데스크톱 앱 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage