Electron-vue boilerplate 프로젝트 만들기

일렉트론이 무엇인지 어떤 맛인지 느껴보기 위해 가장 빠르고 쉽게

 

Electron-vue boilerplate 프로젝트를 설치하고 빌드해보았습니다.

 

그렇다면 boilerplate 란 무엇일까요 위키피디아에선 상용구라 표현을 합니다.

 

필요할 때 간단하게 사용하는 것이라고 하니 일렉트론과 뷰를 활용하여

 

개발자가 쉽게 설치하고 설정을 최소화 시키는 프로젝트라고 생각합니다.

 

 

https://ko.wikipedia.org/wiki/%EC%83%81%EC%9A%A9%EA%B5%AC

상용구 - 위키백과, 우리 모두의 백과사전

공식 사이트에 모든 게 적혀있지만~ 시작하는 명령어입니다.

 

공식 사이트에선 yarn을 추천해주네요 하지만 전 npm!

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

 

본인이 만든 프로젝트로 이동하여 패키지들을 설치합니다.

npm i

폴더구조

설치가 완료되면 실행을 해봐야겠죠

npm run dev

오 멋지다....loading...중

실행중..

일렉트론 자체를 처음 사용해보니 이런 문구가 뜨길래 음 그냥 린트 에러 같은 건가 라고 생각했지만

에러

실행화면에 이렇게 떡하니 누가 봐도 에러가 난 것 같은 화면이다

에러화면

.. 그래서 부랴부랴 찾아봤다 Node.js 버전이 12 버전 이상이면 이런 문제가 생기는 것 같습니다.

 

방법은 크게 2가지 인 것 같습니다. 나의 Node버전을 10 버전대로 낮추던가.. 아니면 설정 파일의 코드를 수정하던가

 

저는 코드를 수정하는 걸로 방향을 잡고 또 검색~~ㅎㅎ

 

이미 깃 헙 이슈에 글이 올라와있었고 해당 이슈를 해결하는 코드 또한 깃 헙에 있었습니다. 

 

https://github.com/SimulatedGREG/electron-vue/issues/871

Webpack ReferenceError: process is not defined · Issue #871 · SimulatedGREG/electron-vue

우리가 수정해야 할 파일은 

 

. electron-vue/webpack.main.config.js

. electron-vue/webpack.renderer.config.js

수정파일

해당 페이지를 열고 

 

HtmlWebpackPlugin를 키워드로 검색하면 

 

요런 설정 코드가 보입니다.

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    })

아래와 같이 수정 templateParameters를 추가해줍니다. 티스토리 문제인가 정렬이 잘 안되네요?ㅎㅎ

templateParameters 함수 외에 바뀌는 건이 아무것도 없습니다. 상위에 두 파일 똑같이 추가만 해주시면 됩니다.

new HtmlWebpackPlugin({
   filename: 'index.html',
   template: path.resolve(__dirname, '../src/index.ejs'),
   templateParameters(compilation, assets, options){
     return {
		compilation: compilation,
		webpack: compilation.getStats().toJson(),
		webpackConfig: compilation.options,
		htmlWebpackPlugin: {
			files: assets,
			options: options
		},
		process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    })

그리고 다시 실행

실행화면

chrome-devtools가 없다는 거 같은데 뭔지 모르니 패스... 나중에 찾아볼래요~ㅎㅎ

 

그럼 설치 파일로 빌드를 해볼까요

npm run build

 

빌드

뭔가 된 거 같습니다. 본인 프로젝트 폴더에 build라는 폴더가 있는데 그 안에. exe파일이 있네요

 

exe파일

셋업 파일을 설치해보니 요론 아이콘이 ㅎㅎ실행화면도 위에화 같습니다.

아이콘

이렇게 간단하게 Electron-vue 프로젝트를 활용하여 데스크톱 앱을 빠르게 만들어보았네요

 

하지만 중요한 건 일렉트론이 어떤 식으로 동작하며 설정은 어떻게 해야 하는지를 배우는 것이 더 중요하겠죠

 

공식문서를 보며 조금씩 공부하여 나만의 앱을 개발해보는 것도 보람찰 것 같습니다.

 

이상으로 Electron-vue 보일러 플레이트 프로젝트를 활용하여 실행 및 간단 빌드까지 마쳤습니다.