無需DevEco Studio就能編譯OHOS應(yīng)用
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
在2022年3月31日發(fā)布了最新的IDE工具DevEco Studio 3.0 Beta3，仔細(xì)閱讀文檔后發(fā)現(xiàn)最新OpenHarmony應(yīng)用的編譯構(gòu)建過程已經(jīng)公開，對(duì)應(yīng)官方文檔：編譯構(gòu)建概述
出于好奇，就對(duì)著文檔一步一步，一個(gè)文件一個(gè)文件的開始手動(dòng)建立，最后編譯成功，分享一下構(gòu)建過程。
成果
工具準(zhǔn)備
Node.js:v14.19.1+
最新OpenHarmonySDK包，并解壓到一個(gè)文件夾中，??SDK下載地址??。
SDK目錄結(jié)構(gòu)。
|---ets
| \---3.1.5.5
| +---api
| +---build-tools
| | +---ets-loader
| \---component
\---toolchains
\---3.1.5.5
+---configcheck
+---lib
\---syscapcheck
在創(chuàng)建好該目錄結(jié)構(gòu)后還需要在ets/js下的./3.1.5.5/build-tools/ets-loader/目錄下執(zhí)行npm install命令
創(chuàng)建工程
1、創(chuàng)建工程目錄
為了演示我重新在E盤創(chuàng)建一個(gè)新的工程文件夾 BuildTest,然后借助vscode工具創(chuàng)建build-profile.json5、hvigofile.js、package.json這三個(gè)配置文件。
build-profile.json5:
注意SDK版本及srcPath配置，簽名信息略想看相應(yīng)配置參考上述官方文檔。
{
"app": {
"signingConfigs": [ //工程的簽名信息，可包含多個(gè)簽名信息
],
"compileSdkVersion": 8, //指定OpenHarmony應(yīng)用/服務(wù)編譯時(shí)的SDK版本
"compatibleSdkVersion": 8, //指定OpenHarmony應(yīng)用/服務(wù)兼容的最低SDK版本
"products": [ //定義構(gòu)建的產(chǎn)品品類，如通用默認(rèn)版、付費(fèi)版、免費(fèi)版等
{
"name": "default", //定義產(chǎn)品的名稱，由開發(fā)者自定義
"signingConfig": "debug", //指定當(dāng)前產(chǎn)品品類對(duì)應(yīng)的簽名信息，簽名信息需要在signingConfigs中進(jìn)行定義
}
]
},
"modules": [
{
"name": "entry", //模塊名稱
"srcPath": "./entry", //標(biāo)明src目錄相對(duì)工程根目錄的相對(duì)路徑
"targets": [ //定義構(gòu)建的產(chǎn)物，由product和各模塊定義的targets共同定義
{
"name": "default", //target名稱，由各個(gè)模塊的build-profile.json5中的targets字段定義
"applyToProducts": [ //產(chǎn)品品類名稱，由products字段進(jìn)行定義
"default"
]
}
]
}
]
}hvigorfile.js：
module.exports = require('@ohos/hvigor-ohos-plugin').legacyAppTasks
package.json：
熟悉npm框架的都應(yīng)該了解，package.json是npm依賴相的配置文件，我們看看在工程目錄下的配置項(xiàng)。
{
"name": "buildtest", //工程名稱
"version": "1.0.0", //版本
"ohos": { //ohos
"org": "huawei",
"buildTool": "hvigor",
"directoryLevel": "project"
},
"description": "example description",
"repository": {},
"license": "ISC",
"dependencies": { //依賴項(xiàng)
"hypium": "^1.0.0",
"@ohos/hvigor": "1.0.6",
"@ohos/hvigor-ohos-plugin": "1.0.6"
}
}配置完工程后，我們創(chuàng)建我們的第一個(gè)模塊entry。
2、創(chuàng)建模塊
在工程目錄創(chuàng)建文件夾entry(于上述build-profile.json5的module配置的srcPath保持一致)，并添加模塊配置文件：build-profile.json5、hvigorfile.js、package.json以及和HarmonyOS一樣的src模塊目錄。
build-profile.json5:
此處省略了Cpp配置，Cpp相關(guān)配置參考官方文檔。
{
"apiType": 'faMode', //API類型，API 8為FA模型，API 9為Stage模型，不需要修改
"showInServiceCenter": true, //是否在服務(wù)中心露出
"buildOption": {
"arkEnable": true, //是否使用方舟編譯器進(jìn)行編譯
},
"targets": [ //模塊對(duì)應(yīng)的產(chǎn)物配置
{
"name": "default",
}
]
}hvigorfile.js：
module.exports = require('@ohos/hvigor-ohos-plugin').legacyHapTasks
大家來找茬，此處配置乍一看和工程下的hvigorfile.js一個(gè)樣，其實(shí)require引入的模塊卻不相同，工程目錄是legacyAppTasks此處是legacyHapTasks(工程是AppTasks模塊是HapTasks)。
我就因?yàn)榇颂幣渲脝栴}浪費(fèi)了十幾分鐘。
package.json：
此處的npm配置文件則是模塊中引用第三方組件/插件配置處。
{
"license": "ISC",
"name": "entry",
"ohos": {
"org": "huawei",
"directoryLevel": "module",
"buildTool": "hvigor"
},
"description": "example description",
"repository": {},
"version": "1.0.0",
"dependencies": {}
}再在src目錄下建立src/main/config.json、src/main/ets/app.ets、src/main/ets/pages/index.ets、src/resources/…等對(duì)應(yīng)文件。此處省略，具體參考對(duì)應(yīng)文件結(jié)構(gòu)及文件。
3、構(gòu)建
（1）添加npm源
必須先添加harmonyOS的npm源，否則執(zhí)行npm install 會(huì)報(bào)404錯(cuò)誤。
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
（2）在工程目錄安裝依賴
在工程目錄(根目錄)下安裝依賴。
npm install
（3）執(zhí)行構(gòu)建命令
在工程目錄執(zhí)行構(gòu)建命令。
構(gòu)建是通過node.js調(diào)用hvigor工具進(jìn)行打包構(gòu)建。
確保node已添加在系統(tǒng)環(huán)境變量中。
node ./node_modules/@ohos/hvigor/bin/hvigor.js -m module assembleHap
不出意外會(huì)出現(xiàn)以下錯(cuò)誤：
PS E:\BuildTest> node ./node_modules/@ohos/hvigor/bin/hvigor.js -m module assembleHap
> hvigor ERROR: A problem occurred in root module:
ERROR: Cause: Can not find sdk.dir or OHOS_SDK_HOME in System Environment Path
at E:\BuildTest\local.properties:1:1
PS E:\BuildTest>
以上原因是我們沒有配置SDK路徑。
處理方式為：
在項(xiàng)目根路徑創(chuàng)建 local.properties文件 或者在系統(tǒng)環(huán)境變量中配置OHOS_SDK_HOME，注意是系統(tǒng)環(huán)境變量不是用戶環(huán)境變量。
local.properties:
sdk.dir= //sdk所在文件夾
nodejs.dir=//nodejs所在文件夾
復(fù)制配置好后再重新執(zhí)行構(gòu)建命令就能看到我們構(gòu)建成功的結(jié)果了。
結(jié)語
做了這么多步驟，那么有什么實(shí)際意義尼?
1.目前openharmony和HarmonyOS在UI上是共通的，只是API上不同。那么就能將HarmonyOS的UI直接拿到Openharmony上使用，直接打包構(gòu)建openharmony的HAP
2.再加工一下可以像vue-cli那樣直接創(chuàng)建出項(xiàng)目目錄，如果能再實(shí)現(xiàn)preview功能，就可以實(shí)現(xiàn)無需依賴IDE就能開發(fā)打包HAP。
3.有機(jī)會(huì)自己自定義一個(gè)IDE出來，將上述過程黑盒化,想自己做IDE的朋友這一步肯定不能少。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
