Dog foot print

Electron with svelte 초기 세팅하기 본문

electron

Electron with svelte 초기 세팅하기

개 발자국 2021. 6. 17. 13:35

Electron with svelte 초기 세팅하기

requirement

  • 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다.
  • 유용한 플러그인 및 모듈을 설치하여, 깔끔한 폴더 구조를 만들어야 한다.
  • svelte와 일렉트론에서 typescript를 사용 할 수 있어야 한다.
  • svelte에서는 scss를 사용 할 수 있어야 한다.
  • svelte에서 최신 문법을 사용 할 수 있어야 한다.
  • svelte에서는 css초기화가 되어야 한다.
  • svelte에서는 css 브라우저 접두사가 붙어야한다.

환경

OS : mac big-sur 11.3
NODE : 14.16.1
NPM : 6.14.12
YARN : 1.22.10

svelte 사용하기

SVELTE TEMPLATE설치

Note : npm , node , yarn 사전 설치

$ npx degit sveltejs/template timer
$ cd timer yarn

폴더 구조 및 rollup 수정

일렉트론과 더불어 편리하게 사용하도록 render_src폴더를 생성하여, src폴더에 있는 문서를 복사, 붙여넣기한다.

이에 맞추어, rollup.config.js도 변경

export default {
    input: 'render_src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
...

멀쩡히 svelte가 번들링 되어 실행되나 확인 .

$ yarn dev

 

electron 사용하기

일렉트론 설치

electron : 데스크탑 Application을 사용 할 수 있게 도와주는 핵심 모듈 .

$ yarn add electron

/main_src에 main.js 정의

Note : 에 main_src폴더를 생성해야함

const { app, BrowserWindow } = require('electron')

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
    })
    mainWindow.loadFile('../public/index.html')
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function() {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
})

번들링 이후 electron 실행 하도록 설정 파일 변경

번들링 이후, electron을 실행하기 위해서는 먼저 package.json과 rollup.config.js의 serve메서드를 수정해야 한다.

./pacakge.json

    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w",
        "start": "sirv public --no-clear",
        "electron-start": "electron ./main_src/main.js"
    },

./rollup.config.json

function execute() {
    let __app;

    function toExit() {
        if (__app) app.kill(0);
    }

    return {
        writeBundle() {
            if (__app) return;
            __app = require('child_process').spawn('yarn', ['electron-start'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'render_src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            compilerOptions: {
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        //
        !production && execute(),
        //
        !production && livereload('public'),
        //
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

Note :

serve라는 메서드 명과 내부 변수인 server는 실행되는 성격에 맞지 않으니, excute 와 __app으로 변경하도록 하자.

index.html 유효 경로 설정 하기.

현재 index.html에 존재하는 css와 script의 src, href는 폴더 경로를 나타내고 있지 않으므로, 이를 구조에 맞게 변경한다.

./public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='stylesheet' href='./global.css'>
    <link rel='stylesheet' href='./build/bundle.css'>

    <script defer src='./build/bundle.js'></script>
</head>

<body>
</body>

</html>

실행

$ yarn dev
  • 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다.
반응형

'electron' 카테고리의 다른 글

Electron with svelte 초기 세팅하기 [2]  (0) 2021.06.17
'electron' Related Articles more
Comments