지난 글에서는 Electron과 vue를 설치하고 Electron 안에 Vue 빌드 파일을 넣어서 프로젝트를 만들었다. 하지만 항상 이렇게 비효율적인 방법으로 할 수는 없다. 그리고 이 비효율성을 최소화하기 위한 BoilerPlate가 있다.
🍳 BoilerPlate
BoilerPlate란 '상용구'라는 뜻으로 반복해서 작성되는 관례적인 코드를 의미한다. 그 예로는 관례적으로 소스코드 파일 시작 부분에 추가되는 선언들이 있다.
한 마디로 매번 반복적으로 작성되는 코드를 정리해둔 것을 의미한다. Electron-Vue도 매번 Vue에서 빌드하고 옮겨줄 수는 없는 법이다. 갓갓 Greg Holguin님이 Electron-Vue 보일러플레이트를 제공하고 있다.
심지어 GitBook에 튜토리얼 형식으로 구조가 매우 잘 정리되어있다. 해당 튜토리얼을 읽고 프로젝트를 생성해보았다.
🔨 Electron-Vue 프로젝트 생성
- 프로젝트 생성 위치로 이동
- vue-cli install :
npm install -g vue-cli- 프로젝트 생성 :
npm init simulatedgreg/electron-vue 프로젝트명- 프로젝트 파일로 이동 :
cd 프로젝트명npm install- 실행 :
npm run dev
위 과정을 거쳐서 실행하면 지난번에 빌드하고 난리치던게 한 방에 생성되는 셈이다.
물론 한 방에 되지 않는다. 에러가 나를 기다리고 있었다^^
옆구르기하면서 봐도 에러난 화면
ReferenceError: process is not defined
시키는대로 했는데 무슨 에러인가해서 깃이슈를 확인해보니 Node 버전에 의한 문제였다. 다들 v.12.x 업데이트를 하고 난 뒤 동일한 에러를 만났다고 한다.
https://github.com/SimulatedGREG/electron-vue/issues/871
해결하는 방법은 크게 두 가지가 있다.
- 걍 Node 버전을 바꾼다.
- 이미 설치한 Node 버전을 바꾸기는 귀찮으니 소스 코드를 약간 수정한다.
프로젝트폴더/.electron-vue/webpack.renderer.config.js에서HtmlWebpackPlugin을 찾아서 아래와 같이 수정한다.
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
// template Parameters 추가
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
}),수정한 뒤 다시 npm run dev로 실행하면 멋진 화면과 함께 프로젝트 기본 화면이 나타난다.
지난번도 이번도 프로젝트 생성에서 꼼지락거리고 있다.
다음 글을 본격적으로 작은 앱을 만들어보려고 한다.
끝 🤟
