Electron 앱을 TypeScript 및 React로 작성
7077 단어 ElectronReactMacTypeScript
개요
Mac상에서 electron 앱을 개발함에 있어서, 우선 이하의 구성으로 최소한 앱을 만들어 동작 검증을 실시했다.
구성
성과
구축 절차
node.js 개발 환경
참조 : nodebrew에서 node 버전을 전환하는 방법 - Qiita
Mac에서 nodebrew를 사용하여 node.js를 설치하는 것이 좋습니다. 이번에는 ver12.13.0을 이용한다.
$ node --version
v12.13.0
Electron (with TypeScript + Webpack) 개발 환경
참조 : TypeScript + Webpack - Electron Forge
여기에서는 앞으로 만들려고 할 world clock을위한 프로젝트를 만드는 절차를 보여줍니다.
자동 생성된 Hello World가 동작하는 것을 확인할 수 있다.
$ yarn create electron-app world-clock --template=typescript-webpack
$ cd world-clock
$ yarn start
React 소개
참조 : React with TypeScript - Electron Forge
변경 순서의 자세한 것은 상기의 링크처를 참조. 이하와 같은 파일 구성으로 하였다.
world-clock/
+-- README.md
+-- tsconfig.json // JSX サポートを追加
+-- package.json // react, react-dom を追加
+-- yarn.lock
+-- webpack.main.config.js // webpack.* は、自動生成されたまま
+-- webpack.plugins.js
+-- webpack.renderer.config.js
+-- webpack.rules.js
+-- node_modules/
| +-- ....
+-- src/
+-- index.ts // main process で実行される
+-- index.html // ほぼ白紙
+-- renderer.ts // renderer process で最初に実行される preload script
+-- App.tsx // react
+-- DumbButton.tsx // react
여기에서 실행하면 아래와 같이 버튼을 누르면 카운트 업하는 electron 앱이 기동된다.
$ yarn start
코드 상세
코드에서 포인트가 되는 부분을 설명해 둔다. gitlab 소스 코드는 여기 .
index.ts
참조 : GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron
향후 개발 중 react developer tools를 사용하고 싶기 때문에 electron-devtools-installer를 이용하기로 했다. 이 메커니즘을 사용하면 renderer process를 담당하는 chromium 시작시 지정한 확장 기능 (이 경우 react developer tools)을 자동으로 설치할 수 있습니다.
index.tsimport installExtension, {
REACT_DEVELOPER_TOOLS,
} from "electron-devtools-installer";
app.on("ready", () => {
// For now, I would use React Dev Tools.
installExtension(REACT_DEVELOPER_TOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log("An error occurred: ", err));
});
renderer.ts
참조 : TypeScript + Webpack - Electron Forge
이번에 이용한 템플릿에서는 renderer.ts라는 파일이 renderer process에서 최초로 실행되는 preload script로 지정되어 있다. 이 renderer.ts 에 react 의 JSX 기법을 직접 기술하려고 하면(자), 파일명을 renderer.tsx 로 변경할 필요가 있어 이야기가 번거롭게 된다.
따라서, 이하와 같이 실제의 react (with JSX) 의 기술은 App.tsx 로부터 앞의 파일군으로 실시한다고 하고, 이 renderer.ts 는 단순한 1행으로 했다.
renderer.tsimport "./App";
App.ts, DumbButton.ts
매우 일반적인 샘플 코드로, 설명하고 설명하는 부분은 없습니다. gitlab의 코드를 참조하십시오.
$ node --version
v12.13.0
$ yarn create electron-app world-clock --template=typescript-webpack
$ cd world-clock
$ yarn start
world-clock/
+-- README.md
+-- tsconfig.json // JSX サポートを追加
+-- package.json // react, react-dom を追加
+-- yarn.lock
+-- webpack.main.config.js // webpack.* は、自動生成されたまま
+-- webpack.plugins.js
+-- webpack.renderer.config.js
+-- webpack.rules.js
+-- node_modules/
| +-- ....
+-- src/
+-- index.ts // main process で実行される
+-- index.html // ほぼ白紙
+-- renderer.ts // renderer process で最初に実行される preload script
+-- App.tsx // react
+-- DumbButton.tsx // react
$ yarn start
코드에서 포인트가 되는 부분을 설명해 둔다. gitlab 소스 코드는 여기 .
index.ts
참조 : GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron
향후 개발 중 react developer tools를 사용하고 싶기 때문에 electron-devtools-installer를 이용하기로 했다. 이 메커니즘을 사용하면 renderer process를 담당하는 chromium 시작시 지정한 확장 기능 (이 경우 react developer tools)을 자동으로 설치할 수 있습니다.
index.ts
import installExtension, {
REACT_DEVELOPER_TOOLS,
} from "electron-devtools-installer";
app.on("ready", () => {
// For now, I would use React Dev Tools.
installExtension(REACT_DEVELOPER_TOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log("An error occurred: ", err));
});
renderer.ts
참조 : TypeScript + Webpack - Electron Forge
이번에 이용한 템플릿에서는 renderer.ts라는 파일이 renderer process에서 최초로 실행되는 preload script로 지정되어 있다. 이 renderer.ts 에 react 의 JSX 기법을 직접 기술하려고 하면(자), 파일명을 renderer.tsx 로 변경할 필요가 있어 이야기가 번거롭게 된다.
따라서, 이하와 같이 실제의 react (with JSX) 의 기술은 App.tsx 로부터 앞의 파일군으로 실시한다고 하고, 이 renderer.ts 는 단순한 1행으로 했다.
renderer.ts
import "./App";
App.ts, DumbButton.ts
매우 일반적인 샘플 코드로, 설명하고 설명하는 부분은 없습니다. gitlab의 코드를 참조하십시오.
향후 개발, 디버그에서 중요한 두 가지 점을 확인했다.
(1) Chromium의 디버거 사용 가능
react 를 사용한다는 것은 어플리케이션 코드의 대부분이 renderer process상에서 움직이기 때문에, renderer process 의 디버그가 원활하게 할 수 있는 것을 확인하고 싶다.
버튼을 클릭했을 때에 기동되는 onClick() 에 breakpoint를 설정하면, 클릭시에 제대로 멈추는 것을 확인할 수 있었다.
(2) react developer tools 사용 가능
이번에는 이 확인을 위해 굳이 App, DumbButton이라는 2개의 react component를 작성했다.
react component tree 가 구축되어 react developer tools 가 그 구조에 근거한 정보를 표시하고 있는 것을 확인할 수 있었다.
Reference
이 문제에 관하여(Electron 앱을 TypeScript 및 React로 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ken-miyashita/items/b69a356860639fd978af텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
