Electron Adventures: 에피소드 80: Svelte 유니코다이저 패키지

이전 에피소드에서 Unicodizer 앱을 만들었습니다. 이제 포장할 차례!

수입

동일한 단계를 따르고 Electron Forge 임포터를 사용해 봅시다.

$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import

그것은 즉시 rollup가 npm run start가 sirv public --no-clear를 실행하기를 원하는 문제를 일으키고 Electron Forge는 electron-forge start을 위해 그것을 인계받기를 원합니다. 따라서 모든 명령을 지원하도록 스크립트 섹션을 편집해 보겠습니다.

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "electron": "electron .",
    "forge-start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

index.js

패키지를 시작하기 전에 이미 index.js 가 http://localhost:5000/ 를 열려고 한다는 것을 알 수 있습니다. 패키지 버전에는 없을 것입니다.
app.isPackaged를 사용하여 원하는 버전을 파악할 수 있습니다.

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({
    webPreferences: {
      preload: `${__dirname}/preload.js`,
    },
  })
  win.maximize()
  if (app.isPackaged) {
    win.loadFile(`${__dirname}/public/index.html`)
  } else {
    win.loadURL("http://localhost:5000/")
  }
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

짓다

이제 앱을 빌드하려면 두 개의 명령이 필요합니다. npm run build는 Svelte 코드를 public/build/bundle.js 및 public/build/bundle.css로 컴파일합니다. npm run package는 out에 Electron 패키지를 생성합니다.

하나의 명령으로 줄일 수 있다면 더 편리하겠지만 그것만으로도 충분합니다.

결과

결과는 다음과 같습니다.





평소와 같이 all the code for the episode is here .

이 시리즈는 여전히 전체 100개의 에피소드로 계획되어 있지만 지금은 몇 주 동안 휴식을 취할 것입니다. 곧 봐요!