티스토리 뷰

기타2

Electron babel7 셋팅하기

oraclian 2020. 2. 21. 12:04

Electron에 바벨을 셋팅하려는데 최신 정보가 잘 없어 정리하게 되었습니다.

 

먼저 일렉트론에 바벨을 셋팅하려면 노드가 설치되어 있어야합니다.

노드는 이미 설치되어 있다고 가정하고 넘어가겠습니다.

 

먼저 프로젝트를 먼저 생성해야겠죠?

아래의 명령어를 입력합니다.

npm init -y

 

다음으로 일렉트론을 설치합니다.

다음의 명령어를 콘솔에 입력합니다.

npm i -D electron

 

다음으로 바벨설정하기 위해 필요한 라이브러리들을 설치합니다.

npm i -D @babel/cli @babel/core @babel/preset-env @babel/register

 

그리고 .babelrc 파일을 만들어 아래의 내용을 입력합니다.

{
    "presets": ["@babel/preset-env"]
}

 

이번엔 일렉트론을 실행하기위해 코드를 작성합니다.

main.js파일을 만들어 es6의 임포트 구문을 사용한 아래의 내용을 입력합니다.

'use strict'
import { app, BrowserWindow } from 'electron'

let createWindow = () => {
    // 브라우저 창을 생성합니다.
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 앱의 index.html를 로드합니다.
    win.loadFile('index.html')

    // 개발자 도구를 엽니다.
    win.webContents.openDevTools()
}

/**
 * Electron의 초기화가 완료되고
 * 브라우저 윈도우가 생성될 준비가 되었을때 호출됩니다.
 * 어떤 API는 이 이벤트가 나타난 이후에만 사용할 수 있습니다.
 */
app.whenReady().then(createWindow)

// 모든 윈도우가 닫히면 종료됩니다.
app.on('window-all-closed', () => {
    // macOS에서는 사용자가 명확하게 Cmd + Q를 누르기 전까지는 
    // Application이나 메뉴바가 활성된 상태로 머물러 있는 것이 일반적입니다.
    if (process.platform !== 'darwin') {
        app.quit()
    }
})


app.on('activate', () => {
    // macOS에서는 dock 아이콘이 클릭되고 다른 윈도우가 열려있지 않았다면
    // 앱에서 새로운 창을 여는것이 일반적입니다.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

// 이 파일에는 나머지 앱의 특정 주요 프로세스 코드를 포함시킬 수 있습니다.
// 별도의 파일에 추가할 수도 있으며 이 경우 임포트 구문이 필요합니다.

 

이번엔 electron에서 로드할 index.html 파일을 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

 

이번엔 package.json 파일을 아래와 같이 작성합니다.

{
  "name": "your-app",
  "version": "0.0.1",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron -r @babel/register ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/register": "^7.8.3",
    "electron": "^8.0.1"
  }
}

 

이제 npm run start를 해보면 아래와 같은 창이 뜨는것을 볼 수 있습니다.

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함