Tauri를 사용하여 ReactJS가 있는 데스크톱 응용 프로그램 만들기
소개
데스크톱 응용 프로그램을 구축하는 것은 과거에 매우 어려웠다. 우선, 자바나 C++ 같은 언어를 많이 알고 많은 설정에 적응해야 한다.고맙게도 기술의 발전에 따라 ElectronJS와 같은 프레임워크가 등장하여 과정을 간소화시켰다.
본고에서 Tauri를 소개합니다. 이것은 HTML과 JavaScript를 기반으로 하는 모든 전단 프레임워크(예를 들어 React, Vue)를 사용하여 본 컴퓨터 데스크톱 응용 프로그램을 구축하는 도구 체인입니다.js 또는 Angular
이 문서는 다음과 같은 경우에 유용합니다.
참고: 본고는 HTML, CSS 및 React에 익숙하다고 가정합니다.Js.
황소자리라니요?js?
황소자리 공식 사이트는 이를 다음과 같이 묘사한다.
전자와 황소자리: 그것들의 차이
Electron Js는 개발자와 위대한 회사(예를 들어 Atom, VScode 등)에서 이미 한동안 존재해 왔다.이 절에서, 우리는 황소자리를 전자 Js와 다르게 하는 특징을 비교할 것이다.
이 테이블은 Github 페이지에서 가져옵니다.
특징
황소자리
전자
바이너리 크기의 MacOS
0.6 MB
47.7 MB
메모리 소모 MacOS
13 MB
34.1 MB
인터페이스 서비스 공급자
변화
크롬
백엔드 바인딩
녹슬다
노드js(ECMAScript)
기본 엔진
C/C++
V8(C/C++)
치실
맞다
아니오
다중 스레드
맞다
아니오
바이트 코드 전달
맞다
아니오
PDF 표시 가능
맞다
아니오
여러 창
금세
맞다
자동 업데이트 프로그램
금세
맞다
플랫폼 간
맞다
맞다
응용 프로그램 아이콘 사용자 정의
맞다
맞다
Windows 바이너리 파일
맞다
맞다
MacOS 바이너리
맞다
맞다
Linux 바이너리 파일
맞다
맞다
iOS 바이너리
금세
아니오
Android 2진
금세
아니오
로컬 호스트 서버
맞다
맞다
로컬 호스트 옵션 없음
맞다
아니오
데스크톱 트레이
금세
맞다
플라잉 스크린
맞다
맞다
사이드카 바이너리 파일
맞다
아니오
우리는 위의 표에서 보았는데, 비록 황소자리는 매우 새로운 사실이지만, 그것은 놀라운 기능을 가지고 있으며, 심지어는 더 많고, 다른 사람들은 파이프 안에 있다.
Tauri의 장점
다음은 다음 데스크톱 프로그램에서 Tauri를 사용할 것을 고려하는 이유입니다.
황소자리가 움직인다!
황소자리는 Node를 사용합니다.js는 사용자 인터페이스(UI)로 HTML, CSS, JavaScript 구현 창을 구축했는데 주로 Rust가 안내합니다.
결과는 단일 바이너리 파일로 macOS(app/dmg), Windows(exe/MSI), Linux(deb/app-image)의 흔한 파일 형식으로 나누어질 수 있다.
황소자리 응용 프로그램은 어떻게 만들어졌는가
다음 절차를 통해 Tauri 응용 프로그램을 만듭니다.
환경 설정
지금 당신은 황소자리가 무엇인지, 그것이 어떻게 작동하는지, 우리가 설정한 것을 알고 있습니다.
이 강좌에서는 운영 체제의 환경 설정을 설명하지 않지만 Windows, macOS, Linus 설정을 확인할 수 있습니다.
Windows Linux 서브시스템(WSL)을 사용하는 사용자의 경우 해당 Linux 관련 지침을 참조하십시오.
React로 Tauri를 구현합니다.JS 회사
현재 우리는 이미 Tauri를 설치해서 기존의 웹 프로젝트를 묶을 수 있습니다.
이 응용 프로그램에 대해, 우리는 내가 React와 Typescript로 구축한 금전 절도 사건 선택기를 사용할 것이다.내가 여기 어떻게 만들었는지 봐.
https://codesandbox.io/s/money-heist-episode-picker-react-and-typescript-web-app-px1qe
계속해서 저장소를 갈라놓으면 셸이 됩니다.분리된 후 다음 명령을 실행하여 분리를 복제해야 합니다.
git clone https://github.com/[yourUserName]/React-Desktop-App.git
Tauri를 로컬과 전역 의존 항목으로 설치할 수 있지만, 이 강좌에서는 로컬에 설치할 것입니다.항목을 복제한 후 다음 작업을 실행하여 종속 항목을 설치합니다.
#Using npm
npm install
#using yarn
yarn
의존 항목을 성공적으로 설치한 후 npm start
를 사용하여 서버를 시작하고 응용 프로그램은 http://localhost:3000
에서 시작해야 합니다.황소자리 정의
만약 Tauri를 npm가 있는 로컬 패키지로 사용하기로 결정한다면, 패키지에 사용자 정의 스크립트를 정의해야 합니다.json:
{
// Add Tauri to the script object
"scripts": {
"tauri": "tauri",
"dev": "npm run tauri dev",
"bundle": "tauri build",
}
초기화 Tauri
src-Tauri
디렉터리를 추가해야 합니다.이 디렉터리에는 데스크톱 프로그램을 설정하는 데 사용되는 파일과 폴더가 있습니다.다른 폴더에 Tauri를 초기화하여 실행하기;
`npm run Tauri init`
초기화할 때 몇 가지 질문을 드리겠습니다. 프로젝트 범위에 따라 대답해 주십시오.내 모습이야
초기화가 완료되면
src-tauri
디렉터리가 만들어집니다. 내용을 확인해 보겠습니다.└── src-tauri
├── .gitignore
├── Cargo.toml
├── rustfmt.toml
├── tauri.conf.json
├── icons
│ ├── 128x128.png
│ ├── [email protected]
│ ├── 32x32.png
│ ├── icon.icns
│ ├── icon.ico
│ └── icon.png
└── src
├── build.rs
├── cmd.rs
└── main.rs
Cargo.toml
내부src-tauri/Cargo.toml
는 package.json
녹줄과 유사하다.그것은 우리 응용 프로그램의 설정을 포함한다.이 문서의 내용은 본 강좌의 범위를 넘어섰다.
## 어플리케이션 번들
현재 플랫폼에 대해 번들
Money-Heist
하려면 다음 명령을 실행하십시오.#builds our react app
npm run build
#builds the Tauri crates
npm run bundle
주의: 이 프로그램을 처음 실행할 때 녹슨 판자 상자를 수집하고 모든 내용을 구축하는 데 시간이 좀 걸리지만 후속 실행 중에는 Tauri 판자 상자를 재건하기만 하면 훨씬 빠릅니다.그러니까 아직 짓고 있을 때 초콜릿을 가져가세요.😎
위의 작업을 완료하면 현재 운영 체제에 바이너리 파일
money-heist
이 있어야 합니다.Cargo가 목표를 구축하는 방식으로 인해 최종 응용 프로그램은 다음 폴더에 배치됩니다.
src-Tauri/target/release/money-heist
. 이 가능하다, ~할 수 있다,...
결론
이 글에서 우리는 이미 Tauri로 데스크톱 응용 프로그램을 구축하는 것이 얼마나 멋있는지 보았다. 나는 네가 평론 부분에서 어떤 생각을 가지고 있는지 보고 싶다.
황소자리에 대한 당신의 견해를 알려주세요.
만약 네가 이 문장을 좋아한다면, 우리를 계속 하게 해라
리소스
Why You as a Developer Should be Using a CMS
Headless Commerce Explained: Definitions, Use Cases, and Roadblocks | Agility CMS
APIs vs. SDKs: What's the Difference? | Agility CMS
TOP Static Site Generators to Watch in 2021
Difference between Headless CMS and static site generator
What is Netlify and Why Should You Care as an Editor? | Agility CMS
What is a Headless CMS? | Agility CMS
Benefits of Headless CMS vs a Traditional CMS | Agility CMS
Content Architecture: The Key to Organizing and Managing Your Content and Team
WordPress And Its Alternatives: Headless CMS | Agility CMS
Open Source CMS vs. Proprietary CMS: Can You Have the Best of Both? | Agility CMS
Choosing a React CMS: What to Look For? | Agility CMS
Take control of your Content Architecture: Content Modelling
DXP vs Headless CMS: Modern DXP Architecture
Jamstack Development: 10 JAMstack Pioneers You Need To Know About in 2021
Reference
이 문제에 관하여(Tauri를 사용하여 ReactJS가 있는 데스크톱 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/krofax/creating-desktop-apps-with-reactjs-using-tauri-af텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)