Windows Installer (.msi) 64-bit
를 다운로드합니다.$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install node
$ npm install electron@latest --save-dev
$ npm install trtc-electron-sdk@latest --save
const TRTCCloud = require('trtc-electron-sdk').default;// import TRTCCloud from 'trtc-electron-sdk';this.rtcCloud = new TRTCCloud();// SDK 버전 가져오기this.rtcCloud.getSDKVersion();
import TRTCCloud from 'trtc-electron-sdk';const rtcCloud: TRTCCloud = new TRTCCloud();// SDK 버전 번호 가져오기rtcCloud.getSDKVersion();
electron-builder
를 사용하는 것이 좋습니다. 다음 명령어를 실행하여 electron-builder
를 설치할 수 있습니다.$ npm install electron-builder@latest --save-dev
trtc_electron_sdk.node
)를 올바르게 패키징하려면 다음 명령도 실행하여 native-ext-loader
를 설치해야 합니다.$ npm install native-ext-loader@latest --save-dev
webpack.config.js
에는 프로젝트 구축 설정 정보가 포함되어 있으며, webpack.config.js
파일은 다음 위치에 있습니다.webpack.config.js
는 프로젝트 기본 디렉터리에 있습니다.create-react-app
을 사용하여 프로젝트를 생성한 경우, 구성 파일은 node_modules/react-scripts/config/webpack.config.js
에 있습니다.vue-cli
를 사용하여 프로젝트를 생성한 경우 vue.config.js
설정의 configureWebpack
속성에 webpack 설정이 있습니다.module.exports
전, 먼저 코드 구축 과정에서 각각의 타깃 플랫폼 특징에 따라 정확하게 패키징할 수 있도록 webpack.config.js
가 구축 시 --target_platform
의 명령 라인 매개변수를 수신하기 위해 다음 코드를 추가합니다.const os = require('os');const targetPlatform = (function(){let target = os.platform();for (let i=0; i<process.argv.length; i++) {if (process.argv[i].includes('--target_platform=')) {target = process.argv[i].replace('--target_platform=', '');break;}}if (!['win32', 'darwin'].includes) target = os.platform();return target;})();
os.platform()
리턴 결과에서"darwin"은 Mac을, "win32"은 Windows(64비트 또는 32비트)를 의미합니다.rules
선택 항목에서 다음 설정을 추가하여 targetPlatform
변수가 rewritePath
를 각각의 타깃 플랫폼에 따라 설정을 전환할 수 있도록 합니다.rules: [{test: /\\.node$/,loader: 'native-ext-loader',options: {rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'// 다양한 개발 환경// rewritePath: './node_modules/trtc-electron-sdk/build/Release'}},]
exe
파일 패키징 시, native-ext-loader
가 [응용 프로그램 기본 루트 디렉터리]/resources
로 TRTC SDK를 로딩하도록 합니다..dmg
패키징 시, native-ext-loader
를 [응용 프로그램 기본 루트 디렉터리]/Contents/Frameworsk/../Resources
로 TRTC SDK를 로딩합니다.native-ext-loader
가 ./node_modules/trtc-electron-sdk/build/Release
에 TRTC SDK를 로딩합니다. 자세한 내용은 simple demo 설정을 참고하십시오.package.json
스크립트 구축 중, --target_platform
매개변수를 추가한 후 다음 단계를 진행합니다.package.json
은 디렉터리 기본 루트에 있으며, 프로젝트 패키징에 필요한 정보가 포함되어 있습니다. 기본적으로 package.json
경로를 수정해야만 원활하게 패키징할 수 있으며, 다음 절차에 따라 해당 문서를 수정할 수 있습니다. main
설정을 수정합니다.// 여러 상황에서 main 파일명은 임의 설정이 가능합니다. 예시: TRTCSimpleDemo를 다음과 같이 설정 가능합니다."main": "main.electron.js",// 단, create-react-app 스캐폴드를 사용하여 생성한 프로젝트의 경우 main 파일을 반드시 다음과 같이 설정해야 합니다."main": "public/electron.js",
build
설정을 복사하여 package.json
파일에 추가합니다. 이는 electron-builder
로, 읽을 수 있는 설정 정보가 있어야 합니다."build": {"appId": "[appId는 사용자 정의]","directories": {"output": "./bin"},"win": {"extraFiles": [{"from": "node_modules/trtc-electron-sdk/build/Release/","to": "./resources","filter": ["**/*"]}]},"mac": {"extraFiles": [{"from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node","to": "./Resources"}]}},
scripts
노드에 다음 구축 및 패키징 명령어 스크립트를 추가합니다.
본 문서에서는 create-react-app
과 vue-cli
프로젝트를 예시로 하며, 기타 툴에서 생성하는 프로젝트는 해당 설정을 참고할 수 있습니다.// create-react-app 프로젝트는 해당 설정을 사용합니다."scripts": {"build:mac": "react-scripts build --target_platform=darwin","build:win": "react-scripts build --target_platform=win32","compile:mac": "node_modules/.bin/electron-builder --mac","compile:win64": "node_modules/.bin/electron-builder --win --x64","pack:mac": "npm run build:mac && npm run compile:mac","pack:win64": "npm run build:win && npm run compile:win64"}// vue-cli 프로젝트는 해당 설정을 사용합니다."scripts": {"build:mac": "vue-cli-service build --target_platform=darwin","build:win": "vue-cli-service build --target_platform=win32","compile:mac": "node_modules/.bin/electron-builder --mac","compile:win64": "node_modules/.bin/electron-builder --win --x64","pack:mac": "npm run build:mac && npm run compile:mac","pack:win64": "npm run build:win && npm run compile:win64"}
매개변수 | 설명 |
main | Electron의 엔트리 파일은 일반적인 상황에서 자유롭게 설정할 수 있습니다. 그러나 create-react-app 스캐폴딩을 사용하여 프로젝트를 생성하는 경우 항목 파일을 public/electron.js |
build.win.extraFiles | Windows 프로그램을 패키징할 때, electron-builder는 from이 가리키는 디렉터리의 모든 파일을 bin/win-unpacked/resources(모두 소문자) |
build.mac.extraFiles | Mac 프로그램을 패키징할 때, electron-builder는 from이 가리키는 trtc_electron_sdk.node 파일을 bin/mac/your-app-name.app/Contents/Resources(첫 글자 대문자)로 복사합니다. |
build.directories.output | 패키지된 파일의 출력 경로입니다. 예를 들어, 이 구성은 실제 필요에 따라 수정할 수 있는 bin 디렉터리에 출력됩니다. |
build.scripts.build:mac | Mac 플랫폼을 대상으로 하는 스크립트 빌드 |
build.scripts.build:win | Windows 플랫폼을 대상으로 하는 스크립트 빌드 |
build.scripts.compile:mac | Mac에서 .dmg 설치 파일로 컴파일 |
build.scripts.compile:win64 | Windows에서 .exe 설치 파일로 컴파일 |
build.scripts.pack:mac | 먼저 build:mac을 호출하여 코드를 빌드한 다음 compile:mac을 호출하여 .dmg 설치 파일로 패키징합니다. |
build.scripts.pack:win64 | 먼저 build:win을 호출하여 코드를 빌드한 다음 compile:win64를 호출하여 .exe 설치 파일로 패키징합니다. |
$ cd [프로젝트 디렉터리]$ npm run pack:mac
bin/your-app-name-0.1.0.dmg
설치 파일을 생성하며, 해당 파일을 선택하여 배포하십시오.$ cd [프로젝트 디렉터리]$ npm run pack:win64
bin/your-app-name Setup 0.1.0.exe
설치 파일을 생성하며, 해당 파일을 선택하여 배포하십시오.
문제 해결에 도움이 되었나요?