자동 재부팅이 가능한 Electron+parcel 개발 환경을 최소 절차로 구축

일렉트론 개발에서는 파셀을 어떻게든 사용하려고 했는데, 상당한 시험이 이뤄졌기 때문에 구축 절차를 총괄했다.나는 몇 번 구워야 할지 모르겠지만, 나는 몇 번 구울 것이다.

완성물

여기 창고.
이것은 개발 환경으로 원본이 변할 때 자동으로 구축되고 시작된 Electron 응용 프로그램의 내용도 자동으로 다시 불러옵니다.
parcel의 능력을 그대로 활용했기 때문에 타입 스크립트와 ss를 추가하는 것도 쉽다.
노드의 각종 기능도 이용할 수 있다.

사랑을 끊는 일

Type Script, sass, 기타 다양한 설정

parcel 문서를 참조하십시오.

메인 프로세스의 스크립트를parcel의 구축 대상으로 설정

렌더링 프로세스에 대해서만 객체를 자동으로 구성/다시 로드할 수 있습니다.여러 항목을 잘 처리하는 것은 번거롭지만 얻는 것이 적기 때문에 이번에는 사랑하지 않겠습니다.

production 구축 방법

중점 해설

대수롭지 않은 기술량은 아니지만 마땅한 부분이 많아 일일이 해설한다.

종속성 패키지

package.json

    "devDependencies": {
        "electron": "^9.2.1",
        "electron-reload": "^1.5.0",
        "parcel-bundler": "^1.12.4"
    },

electron과parcel-bundler는 말할 것도 없어요.electron 측에서 자동 재부팅 필요electron-reload를 주의하십시오.

엔트리 포인트

package.json

    "main": "main.js",

주 프로세스의 입구점을 잘못하지 마십시오.필자는 반했기 때문에 먼저 적당한 요점을 적었다.

npm scripts

package.json

    "scripts": {
        "start": "electron .",
        "watch": "parcel watch src/index.html --public-url ./ --target electron"
    },

npm run watch의 매개 변수를 주의하십시오.--public-url ./는 필수입니다.구축된 버전부터 js를 불러올 수 있는 경로가 있는지 여부입니다.
-- 공공연한 URL 없음

<script src="/src.e31bb0bc.js"></script>

-- 퍼블릭-url 있음

<script src="src.e31bb0bc.js"></script>

또 잊지 마라--target electron.npm run start의 한 측은 단순히electron을 시작하고 있다(자동재부팅 기능은main.js에 기술되어 있다).
개발을 진행하려면 우선npm run watchparcel을 시작하고 이어npm run startelectron을 시작합니다.

start,watch는 다른 스크립트입니다.

두 개를 간단히&& 연결하면 원활하게 진행되지 않는다.concurrently 같은 포장도 하나로 합칠 수 있지만 최소한의 수속이기 때문에 이번에는 얘기하지 않겠습니다.필자는 개인적으로 다른 시나리오 때문에 특별히 괴로워하지 않았다.
다음은 주요 과정main.js에 대한 해설이다.위에서 말한 바와 같이 이것은 parcel의 구축 대상이 아닙니다. 주의하십시오.

electron-reload의 유효성

main.js

require("electron-reload")(path.join(__dirname, "dist"));

electron-reload를 사용하면 디스플레이 아래의 파일이 변경될 때 자동으로 내용을 다시 불러옵니다.
parcel로 자동으로 구축된 결과는dist 이하로 출력되며, 이를 검출합니다. 전자론 측에서 다시 싣고 운전하는 것이 이른바 pigora 스위치 방식입니다.

유효성 nodeIntegration

main.js

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // ★
    },
  });

문제의 장면.nodeIntegration: true에 따르면 안전상의 위험성과 교환은 다양한 일을 가볍게 한다.이번엔 상당히 깔끔하게 최소 수속을 목표로 썼는데 궁금하시면... 힘내세요.
이상은 환경 구축의 완성이다.

시험해 보다

우선npm run watchparcel을 시작합니다.계속해서 npm run start 전자론을 시작합니다.
src/index.) 및 src/index입니다.js를 변경하면 다시 불러올 필요가 있는지 자동으로 확인할 수 있습니다.

최후

창고. MIT 라이센스가 포함되어 있으므로 자유롭게 사용하십시오.만약 무슨 문제가 있으면 평론란에 써 주세요.