웹 프론트엔드 JS 튜토리얼 node-webkit을 사용하여 웹을 데스크탑 애플리케이션으로 패키징하는 방법

node-webkit을 사용하여 웹을 데스크탑 애플리케이션으로 패키징하는 방법

Jun 08, 2018 pm 02:59 PM
node webkit 데스크탑 애플리케이션

이 글에서는 node-webkit을 사용하여 Windows 환경에서 웹 애플리케이션을 데스크톱 애플리케이션으로 패키징하는 튜토리얼을 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

node-webkit은 Chromium과 node.js를 결합한 것입니다. Chrome 브라우저 및 node.js를 기반으로 구축된 웹 애플리케이션은 데스크톱 애플리케이션으로 패키징될 수 있으며 크로스 플랫폼일 수도 있습니다. 분명히 전통적인 데스크톱 애플리케이션에 비해 특정 특정 영역에서 html5+css3+js로 개발된 웹 애플리케이션은 더 간단하고 효율적이며 node.js의 기능도 사용할 수 있으므로 node-webkit은 여전히 ​​매우 유용합니다.

이제 간단한 데모를 사용하여 웹 애플리케이션을 실행 파일로 패키징하는 방법을 소개하겠습니다. (여기서는 Windows 환경만 소개합니다.)

먼저 데모의 시작 페이지로 새 index.html 파일을 생성해 보겠습니다. 일시적으로 이 페이지를 완전한 웹 애플리케이션으로 생각하세요. 예를 들어 콘텐츠에 원하는 것을 작성하세요.

그런 다음 다음 콘텐츠로 package.json 구성 파일을 만듭니다.

기본 속성은 항목 파일을 지정하는 데 사용됩니다. 로컬 파일일 수도 있고 원격 웹 애플리케이션을 데스크톱 애플리케이션으로 직접 전환하는 것과 동일한 원격 URL일 수도 있습니다.

이름과 기본 두 가지 속성 외에도 애플리케이션 아이콘 지정, 브라우저 도구 모음 표시 여부, 브라우저의 초기 크기 지정 등과 같이 구성할 수 있는 다른 유용한 속성이 많이 있습니다. 특정 구성 매개변수 문서는 https://github.com/rogerwang/node-webkit/wiki/Manifest-format

에서 찾을 수 있습니다. 이제 두 개의 파일이 있습니다.

그런 다음 index.html과 package.json 두 파일을 app.zip이라는 이름의 zip 패키지로 압축합니다.

이제 app.zip 압축 패키지의 내용은 다음과 같아야 합니다.

그런 다음 app.zip 파일의 확장자를 nw로 변경하고 app.nw

로 변경합니다. 그런 다음 node-webkit의 Windows 버전을 다운로드하고 압축을 풀어 폴더를 얻습니다.

그런 다음 앱 이전에 얻은 .nw 파일은 nw.exe로 실행될 수 있습니다. app.nw를 nw.exe로 직접 드래그하면 됩니다. 실행 결과는 다음과 같습니다.

효과는 크롬에서 index.html 페이지를 여는 것과 비슷합니다. 물론 package.json 파일을 A와 비슷하게 구성하여 브라우저 도구 모음이나 테두리를 숨길 수도 있습니다. 데스크탑 소프트웨어.

nw 파일이 동작하려면 node-webkit 환경의 지원이 필요하기 때문에 app.nw 파일도 node-webkit 환경 파일과 함께 실행 파일로 패키징해야 합니다.

먼저 Windows cmd를 열고 다음 명령을 입력하세요.

copy /b nw.exe+app.nw app.exe

파일 경로는 실제 상황에 따라 변경되어야 합니다. app.nw를 node-webkit의 기본 폴더에 배치하면 출력 app.exe도 이 폴더에 있다고 가정합니다.

명령을 실행하면 실행 파일 app.exe가 생성됩니다.

이 단계에서 app.exe 파일을 얻었지만 app.exe 파일만으로는 충분하지 않으면 이 실행 파일을 작동하려면 여러 dll 파일의 지원도 필요합니다.

nw.pak, icudt.dll 두 파일이 필요합니다.

ffmpegsumo.dll 파일은 미디어 지원 파일입니다. HTML 페이지에서

libEGL.dll 및 libGLESv2.dll 이 두 파일은 webGL 또는 GPU를 사용하는 데 필요합니다

결국 우리가 얻는 것은 다음과 같은 폴더입니다:

app.exe를 실행하여 데모를 실행합니다.

하지만 우리 대부분이 원하는 것은 사용자에게 exe 파일을 제공하고 사용자는 다른 파일을 첨부하지 않고도 사용할 수 있는 것입니다.

음, app.exe 및 기타 파일을 다시 패키지하여 위 그림의 모든 파일을 실행 파일로 변환할 수도 있습니다. 사용자가 이 파일을 얻는 한 애플리케이션을 실행할 수 있습니다.

이 단계를 수행하려면 먼저 Enigma Virtual Box라는 소프트웨어가 필요합니다. 이 소프트웨어를 다운로드하여 설치한 다음 엽니다.

그런 다음 입력 파일 이름 입력에 app.exe의 경로를 입력하고 출력 파일 이름 입력에 패키지된 실행 파일을 출력할 위치를 입력합니다. 마지막 단계는 app.exe를 제외한 다른 파일을 파일로 드래그하는 것입니다. 메시지가 나타나면 기본값을 선택합니다.

마지막으로 오른쪽 하단의 처리 버튼을 클릭하면 완료됩니다.

마침내 app_boxed.exe 파일을 얻었습니다. 이 파일을 사용자에게 제공하면 사용자가 실행할 수 있습니다.

node-webkit은 편리하지만, 얻어지는 실행 파일의 용량이 좀 크다는 점이 큰 단점 중 하나입니다. 장단점을 잘 생각해보시고 사용하지 않으셔도 됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

기본 JavaScript를 사용하여 돋보기 효과 얻기

redis를 통해 nodejs의 캐시로 구현된 캡슐화된 캐시 클래스

Express에서 bcryptjs 비밀번호 암호화 사용

위 내용은 node-webkit을 사용하여 웹을 데스크탑 애플리케이션으로 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Nordhold : Fusion System, 설명
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 Dec 30, 2023 am 09:34 AM

간단하고 이해하기 쉬운 PyCharm 프로젝트 패키징 방법을 공유하세요. Python의 인기로 인해 점점 더 많은 개발자가 PyCharm을 Python 개발의 주요 도구로 사용하고 있습니다. PyCharm은 개발 효율성을 향상시키는 데 도움이 되는 다양한 편리한 기능을 제공하는 강력한 통합 개발 환경입니다. 중요한 기능 중 하나는 프로젝트 패키징입니다. 이 글에서는 간단하고 이해하기 쉬운 방식으로 PyCharm에서 프로젝트를 패키징하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 왜 패키지 프로젝트인가? Python으로 개발됨

Golang을 사용하여 강력한 데스크톱 애플리케이션 개발 Golang을 사용하여 강력한 데스크톱 애플리케이션 개발 Mar 19, 2024 pm 05:45 PM

Golang을 사용하여 강력한 데스크톱 애플리케이션을 개발하세요. 인터넷의 지속적인 발전으로 인해 사람들은 다양한 유형의 데스크톱 애플리케이션에서 분리될 수 없게 되었습니다. 개발자의 경우 강력한 데스크톱 애플리케이션을 개발하려면 효율적인 프로그래밍 언어를 사용하는 것이 중요합니다. 이 기사에서는 Golang(Go 언어)을 사용하여 강력한 데스크톱 애플리케이션을 개발하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. Golang은 Google에서 개발한 오픈소스 프로그래밍 언어로 단순성, 효율성, 강력한 동시성 등의 특징을 갖고 있으며 매우 적합합니다.

Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법 Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법 Mar 28, 2023 pm 07:28 PM

파일 업로드를 처리하는 방법은 무엇입니까? 다음 글에서는 Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까? PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까? Mar 05, 2025 pm 05:57 PM

Pinetwork 노드에 대한 자세한 설명 및 설치 안내서이 기사에서는 Pinetwork Ecosystem을 자세히 소개합니다. Pi 노드, Pinetwork 생태계의 주요 역할을 수행하고 설치 및 구성을위한 전체 단계를 제공합니다. Pinetwork 블록 체인 테스트 네트워크가 출시 된 후, PI 노드는 다가오는 주요 네트워크 릴리스를 준비하여 테스트에 적극적으로 참여하는 많은 개척자들의 중요한 부분이되었습니다. 아직 Pinetwork를 모른다면 Picoin이 무엇인지 참조하십시오. 리스팅 가격은 얼마입니까? PI 사용, 광업 및 보안 분석. Pinetwork 란 무엇입니까? Pinetwork 프로젝트는 2019 년에 시작되었으며 독점적 인 Cryptocurrency Pi Coin을 소유하고 있습니다. 이 프로젝트는 모든 사람이 참여할 수있는 사람을 만드는 것을 목표로합니다.

Node의 프로세스 관리 도구 'pm2”에 대한 심층 분석 Node의 프로세스 관리 도구 'pm2”에 대한 심층 분석 Apr 03, 2023 pm 06:02 PM

이 기사에서는 Node의 프로세스 관리 도구인 "pm2"를 공유하고 pm2가 필요한 이유, pm2 설치 및 사용 방법에 대해 설명합니다. 모두에게 도움이 되기를 바랍니다!

코드 패키징 및 배포에 Python 정규식을 사용하는 방법 코드 패키징 및 배포에 Python 정규식을 사용하는 방법 Jun 23, 2023 am 09:31 AM

Python 프로그래밍 언어가 점점 대중화되면서 점점 더 많은 개발자가 Python으로 코드를 작성하기 시작하고 있습니다. 그러나 실제 사용에서는 이러한 코드를 패키징하여 다른 사람이 사용할 수 있도록 배포해야 하는 경우가 많습니다. 이 기사에서는 코드 패키징 및 배포에 Python 정규식을 사용하는 방법을 소개합니다. 1. Python 코드 패키징 Python에서는 setuptools 및 distutils와 같은 도구를 사용하여 코드를 패키징할 수 있습니다. 이 도구는 Python 파일, 모듈을 변환할 수 있습니다.

Angular 및 Node를 사용한 토큰 기반 인증 Angular 및 Node를 사용한 토큰 기반 인증 Sep 01, 2023 pm 02:01 PM

인증은 모든 웹 애플리케이션에서 가장 중요한 부분 중 하나입니다. 이 튜토리얼에서는 토큰 기반 인증 시스템과 기존 로그인 시스템과의 차이점에 대해 설명합니다. 이 튜토리얼이 끝나면 Angular와 Node.js로 작성된 완벽하게 작동하는 데모를 볼 수 있습니다. 기존 인증 시스템 토큰 기반 인증 시스템으로 넘어가기 전에 기존 인증 시스템을 살펴보겠습니다. 사용자는 로그인 양식에 사용자 이름과 비밀번호를 입력하고 로그인을 클릭합니다. 요청한 후 데이터베이스를 쿼리하여 백엔드에서 사용자를 인증합니다. 요청이 유효하면 데이터베이스에서 얻은 사용자 정보를 이용하여 세션을 생성하고, 세션 정보를 응답 헤더에 반환하여 브라우저에 세션 ID를 저장한다. 다음과 같은 애플리케이션에 대한 액세스를 제공합니다.

Python 응용 프로그램의 독립 선언: PyInstaller의 자유를 향한 길 Python 응용 프로그램의 독립 선언: PyInstaller의 자유를 향한 길 Feb 20, 2024 am 09:27 AM

PyInstaller: Python 애플리케이션의 독립성 PyInstaller는 Python 애플리케이션과 해당 종속성을 독립적인 실행 파일로 패키징하는 오픈 소스 Python 패키징 도구입니다. 이 프로세스는 Python 인터프리터에 대한 의존성을 제거하는 동시에 애플리케이션이 Windows, MacOS 및 Linux를 포함한 다양한 플랫폼에서 실행될 수 있도록 합니다. 패키징 프로세스 PyInstaller의 패키징 프로세스는 비교적 간단하며 다음 단계로 구성됩니다. pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile 옵션은 단일 파일을 생성합니다.

See all articles