[Electron] electron-builder 의 files 에 대해 알아본다.

Electron 을 이용하여 프로그램을 만들기 위해서는 electron-builder 라는 것을 통해서 배포하고자 하는 플랫폼으로 포팅을 시킨다. (단, 맥 환경에서 Windows 로 포팅해주지는 못하는 것 같다 [되는 방법이 있으면 알려주세요 ㅠㅜ])

 

포팅을 하는 정보는 package.json 에 프로그램의 기본적인 정보들과 script, dependency 정보들과 함께 작성을 한다. electron-builder 의 공식 사이트를 참조해 본다면,

 

electron-builder

// package.json

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": { ... },
  "author": "",
  "license": "ISC",
  "devDependencies": { ... },
  "dependencies": { ... },

  // 여기서부터 electron-build 설정 정보 
  "build": {
    ...
  }
}

위와 같이 build 라는 항목안에 builder 가 해줄 것들을 설정해주도록 되어있다. 여기에서 세부 사항들은 electron-builder 홈페이지에서 참조하면 될 것 같고, 이번 포스팅의 주제는 builder 가 패키징을 하면서 파일 구성이 어떤 방식으로 되어지고 설정을 해야 하는 가에 대해서 알아보려 한다.

---

electron-builder 를 통해서 빌드를 하게 되면, electron 을 작업하고 있는 프로젝트의 모든 파일들이 패키징이 된다. JS 파일이라면 Webpack Production 으로 처리한 아이들만 패키징을 하고 싶지만 실상 확인해보니 src 폴더까지 전부 들어가져버리는 것이다. 그래서 files 설정을 통하여 어떤 파일은 집어넣고 제외하고 하는 필터링 방법에 대해 알아보도록 하겠다.

 

고맙게도 공식 문서에서는 files 에 대해서 기본적인 템플릿을 지원하고 있다. 그래서 눈치밥으로 설정하면 되는데 기본 설정은 다음 처럼 되어있다고 한다.

[
  "**/*",
  "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
  "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
  "!**/node_modules/*.d.ts",
  "!**/node_modules/.bin",
  "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
  "!.editorconfig",
  "!**/._*",
  "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
  "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
  "!**/{appveyor.yml,.travis.yml,circle.yml}",
  "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
]

 이것이 어떻게 package.json 에 적용이 되어야 하는 가 하면,

{
 ...,
 
 "build": {
  ...,
  
  "files": [
    "**/*",
    "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
    "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
    "!**/node_modules/*.d.ts",
    "!**/node_modules/.bin",
    "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
    "!.editorconfig",
    "!**/._*",
    "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
    "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
    "!**/{appveyor.yml,.travis.yml,circle.yml}",
    "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
  ]
 }
}

이렇게 들어가게 된다. 기본 템플릿의 유형을 확인해보면, 외국에서는 asterisk 라고 하고 우리나라에서는 별표 라는 기호와 느낌표, 폴더명, 파일명, 확장자명 이런 조합으로 쓰여져 있다.

 

여기서 '!' 가 맨 앞으로 되어있는 것은 해당 조건에 해당되는 파일은 패키지를 만들 때 제외를 시킨다는 것이다. 그래서 두번째 조건을 보게되면, node_modules 내에 있는 폴더 안에 CHANGELOG.md, README.md, README, readme.md, readme 파일은 제외를 시킨다는 것이다. node_moduels 앞에 있는 ** 표시는 아마도 디렉토리를 얘기 하는 것인데, ./a/b/node_modules 이건 ./a/b/c/node_modules 앞 부분은 상관없다는 필터 조건이다. 만약 특정 확장자를 제외한다고 하면, [ !**/*.{jpg, png, gif, bmp} ] 이런 식으로 사용할 수도 있다.

 

여기서 맨 첫번 째 줄이 프로젝트 폴더 내에 모든 파일을 패키지에 추가하는 조건이다. 느낌표도 없고 [ **/* ] 라고 써 있으니.. 그냥 다 되는 것이다. 그래서 특정 폴더만 패키지에 추가하고 싶다 생각한다면 첫번째 줄은 지우고 따로 입력하도록 해야 한다. 내 프로젝트의 경우에는 webpack 으로 build 되고나서 dist 파일이 생성되고 그 곳에 파일이 집어넣어지기 때문에 [ dist/* ] 라고 조건을 달아놓았다.

 

그리고 files 내에서, 패키징을 할 때 특정 폴더를 옮겨주는 조건도 사용할 수 있는데 그것을 FileSet 형태라고 써 놓고 있다. FileSet 형태는 다음과 같이 되어있다.

{
 from: "/path/src",
 to: "/path/dest",
 filter: [ "**/*", ... ]
}

from 은 현재 옮기고자 하는 폴더를 얘기 하는 것이고, to 는 패키징하면서 옮겨질 폴더를 얘기한다. from 과 to 는 상대 경로가 가능하고 루트 디렉토리는 자동으로 프로젝트 폴더로 되어있다. filter 는 사용하는 방식은 같으며, [ **/* ] 는 무조건 들어가야 하고 그 외에 제외하고 싶은 부분은 추가하여 사용하면 된다. 

 

파일 이동의 경우에는 잘못 설정하게 되면 개발에서는 A 경로를 사용했는데 A, B 를 나눠야 하는 경우가 생기기 때문에 적절하게 판단하여 사용하면 될 것이다.