uni-app 프로젝트를 HBuilderX에서 CLI 방식으로 전환하면 자동화된 빌드 파이프라인 구축이 가능하며, CI/CD 환경과의 통합도 원활해집니다. 기존 HBuilderX는 개발 편의성을 위해 병행 사용할 수 있습니다.
1. 소스 디렉토리 재구성
프로젝트 루트에 src 폴더를 생성하고 모든 애플리케이션 소스코드를 해당 위치로 이동합니다.
2. 진입점 HTML 파일 생성
루트 경로에 index.html 파일을 작성합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<script>
const supportsSafeArea = typeof CSS !== 'undefined' &&
CSS.supports &&
(CSS.supports('top: env(safe-area-inset-top)') ||
CSS.supports('top: constant(safe-area-inset-top)'));
const viewportContent = 'width=device-width, initial-scale=1.0, ' +
'maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' +
(supportsSafeArea ? ', viewport-fit=cover' : '');
document.write(`<meta name="viewport" content="${viewportContent}" />`);
</script>
<title></title>
</head>
<body>
<div id="root"><!--ssr-outlet--></div>
<script type="module" src="/src/entry.js"></script>
</body>
</html>3. 패키지 매니저 설정
package.json 파일을 생성하여 의존성과 스크립트를 정의합니다:
{
"name": "my-uniapp-project",
"version": "1.0.0",
"type": "module",
"scripts": {
"serve:h5": "uni",
"serve:h5:ssr": "uni --ssr",
"serve:wx": "uni -p mp-weixin",
"serve:alipay": "uni -p mp-alipay",
"serve:baidu": "uni -p mp-baidu",
"serve:tt": "uni -p mp-toutiao",
"serve:qq": "uni -p mp-qq",
"serve:jd": "uni -p mp-jd",
"serve:ks": "uni -p mp-kuaishou",
"serve:lark": "uni -p mp-lark",
"serve:app": "uni -p app",
"serve:android": "uni -p app-android",
"serve:ios": "uni -p app-ios",
"serve:quickapp": "uni -p quickapp-webview",
"serve:quickapp-hw": "uni -p quickapp-webview-huawei",
"serve:quickapp-union": "uni -p quickapp-webview-union",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:wx": "uni build -p mp-weixin",
"build:alipay": "uni build -p mp-alipay",
"build:baidu": "uni build -p mp-baidu",
"build:tt": "uni build -p mp-toutiao",
"build:qq": "uni build -p mp-qq",
"build:jd": "uni build -p mp-jd",
"build:ks": "uni build -p mp-kuaishou",
"build:lark": "uni build -p mp-lark",
"build:app": "uni build -p app",
"build:android": "uni build -p app-android",
"build:ios": "uni build -p app-ios",
"build:quickapp": "uni build -p quickapp-webview",
"build:quickapp-hw": "uni build -p quickapp-webview-huawei",
"build:quickapp-union": "uni build -p quickapp-webview-union"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-components": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-h5": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-jd": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080720230703001",
"vue": "^3.3.4",
"vue-i18n": "^9.2.2"
},
"devDependencies": {
"@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3080720230703001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3080720230703001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080720230703001",
"sass": "^1.62.1",
"vite": "^4.3.9"
}
}4. 드 도구 설정
vite.config.js 파일을 생성하여 Vite 플러그인을 구성합니다:
import { defineConfig } from 'vite'
import uniPlugin from '@dcloudio/vite-plugin-uni'
export default defineConfig({
plugins: [
uniPlugin(),
],
build: {
sourcemap: true,
},
})5. TypeScript 지원 설정
IDE 자동완성 및 타입 검사를 위한 jsconfig.json 파일을 작성합니다:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"types": [
"@dcloudio/types",
"miniprogram-api-typings"
],
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "node"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}6. 의존성 설치
터미널에서 프로젝트 루트로 이동 후 패키지를 설치합니다:
npm install7. 플랫폼별 빌드 실행
설정된 스크립트를 활용하여 원하는 플랫폼용 산출물을 생성합니다.
H5 웹 애플리케이션
npm run build:h5결과물 위치: dist/build/h5
하이브리드 앱 (Android/iOS)
npm run build:app결과물 위치: dist/build/app
위챗 미니프로그램
npm run build:wx결과물 위치: dist/build/mp-weixin
알리페이 미니프로그램
npm run build:alipay결과물 위치: dist/build/mp-alipay