Electron 통합 React 사용 개발 환경 구축 절차 상세 설명
2210 단어 Electronreact.환경 을 조성 하 다
사용자 인터페이스 구축 에 사용 할 자바 스 크 립 트 라 이브 러 리
순서
우선 React 만 들 기
npx create-react-app doc
doc 프로젝트 에 들 어가 기
cd doc
전자장 치
npm install electron --save-dev
설치 의존
생산 환경 여 부 를 판단 하 다.
cnpm install electron-is-dev --save-dev
프로젝트 루트 디 렉 터 리 에 main.js 만 들 기
const { app ,BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 1024,
height: 680,
webPreferences:{
nodeIntegration: true,
}
})
const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
mainWindow.loadURL(urlLocation);
})json 파일 에 다음 두 줄 추가
먼저 npm start 를 실행 한 다음 셸 을 열 어 npm run dev 를 실행 합 니 다.
닥 친 문제
1.여러 번 운행 해 야 합 니 다.매우 번 거 롭 습 니 다.
2、매번 자동 으로 브 라 우 저 열기
3.react 운행 속도 가 느 리 고 electron 로드 가 되 지 않 으 며 수 동 으로 새로 고침 해 야 합 니 다.
완벽 하 다.
설치 의존
여러 명령 을 동시에 집행 하 다.
cnpm install concurrently --save-dev
자원 로드 완료 대기https://www.npmjs.com/package/concurrently
cnpm install wait-on --save-dev
환경 변수
cnpm install cross-env --save-dev
완벽 한 제 이 슨
"dev": "concurrently \" wait-on https://www.npmjs.com/package/wait-on && electron . \" \" cross-env BROWSER=none npm start \" "
설정 이 완료 되면 터미널 에서 직접 실행 합 니 다
npm run dev그 후에 우리 의 인터페이스 가 팝 업 됩 니 다.총결산
여기 서 Electron 통합 React 사용 개발 환경 구축 절차 에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 관련 Electron 통합 React 구축 환경 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Electron+Vue에서 가상 화폐의 판 정보 보기이번에는 구현 자료로 가상 통화의 판 정보를 표시하고 싶습니다. Eletron이란, 다시 말하면, Windows/macOS/Linux에서 실행할 수 있는 데스크탑 앱을 HTML+CSS+JavaScript와 같은 We...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
