전자에 create-react-app 통합하기

Question

나는 너무 자주 StackOverflow에 의지하지 않겠다. 그러나 이것은 나를 괴롭힌다. 나는 전자 프레임 워크에 들어가려고 노력하고있는 생성 - 반응 - 응용 프로그램이 있습니다. 나는 기본적으로 전자 메일 응용 프로그램을 시작하기 전에 먼저 webpack dev에 서버를 시작할 때만 barebones webpack 구성 설정으로 처음부터 모든 것을 만드는 온라인 자습서를 발견했습니다. package.json 시작 스크립트는 "전자"라는 명령 하나만 실행하기 때문에 응용 프로그램을 패키지화하려는 경우 중복됩니다. 그렇다면 React 앱의 정적 생성 파일을 Electron에 포함하려면 어떻게해야합니까? 저는 성공하기 전에 여러 번 시도해 보았습니다. 그리고 가장 가까운 것은 main.js 입력 파일에서 전자에 대한 정적 반응 index.html 파일을 가리키고있었습니다. 단지 문제는 생산 체제 였기 때문에 모든 것이 축소되었습니다. 이 파일 내의 리소스를 올바르게로드하려면 모든 src url에서 첫 번째 "/"를 수동으로 제거해야했습니다 (더 큰 응용 프로그램에서 얼마나 귀찮은 지 알 수 있습니다).

이

가 어떻게 내 반응 응용 프로그램의 정적 파일 때문에 전자 부하 제대로 "역할"을 수행합니다

그래서 난 내 실제 질문은 추측?

PS (내가 CSS 모듈을 활용하기 위해 응용 프로그램을 배출 있습니다 또한 걸릴 마십시오) 다음 반응 - 전자 튜토리얼에 링크 - 당신이 튜토리얼의 논리에 의해 https://medium.com/@Agro/developing-desktop-applications-with-electron-and-react-40d117d97564

Answer 1

정적 파일을 /public 폴더에 넣으려면 애셋이 html 문서에서 relativ로로드되지만이 방법으로 모든 src URL에서 첫 번째 "/"를 수동으로 제거해야하는 경로와 동일한 문제가 발생합니다. URL은 빌드 할 때 정확해야합니다.

그 beeing 내가 자습서 전자 개발에 대한 나쁜 연습을 장려한다고 생각하고 그것이 당신이 가진 문제의 일부라고 생각했다.

node_modules 경로에서 절대 전자를 시작할 수 없습니다. 이것을 electron ./path/to/electronscriptsfolder으로하면 앱 정의가 들어있는이 폴더에 index.js/main.js가로드됩니다.

Webpack은 번들링이 필요없고 전자를 패킹 할 필요가 없으므로 webpack은 네이티브 패키지 및 경로와 관련된 문제를 발생시키는 경향이 있기 때문에 전자에 대한 잘못된 정의입니다 (직접 설명한 것처럼). 전자 특정 로직으로 수행하려면 electron-compile 또는 gulp 파이프 라인을 사용하십시오.

전자가 매우 중요하더라도 베벨 구성은 없습니다. 기본적으로 두 개의 bable 구성이 필요합니다. 하나는 특정 노드 버전에서 실행중인 전자 용이고 다른 하나는 특정 구현에서 실행중인 크롬 용입니다. 여기

크롬 59 Node.js를 8.2.1

Renderprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "chrome": "59" 
     } 
    }] 
    ] 
} 

Mainprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "node": "8.2.1" 
     } 
    }] 
    ] 
} 

전자 1.8.1 사용하기위한 예시