【堅(jiān)果派】JS開源庫(kù)適配OpenHarmony系列——第一期實(shí)操

1. 為什么適配JS開源庫(kù)

由于OpenHarmony應(yīng)用是基于ArkTS開發(fā)，而ArkTS是在保持TypeScript（簡(jiǎn)稱TS）基礎(chǔ)語(yǔ)法風(fēng)格的基礎(chǔ)上，對(duì)TS的動(dòng)態(tài)類型特性施加更嚴(yán)格的約束，引入靜態(tài)類型。因此在開發(fā)OpenHarmony三方庫(kù)時(shí)，建議首選在成熟的JS/TS開源三方庫(kù)上開發(fā)。

2. 選擇哪個(gè)JS開源庫(kù)合適

JS/TS開源三方庫(kù)的選擇需遵循易用性、實(shí)用性、維護(hù)性、擴(kuò)展性等特性，通常方法是在github/npm上按照特性和語(yǔ)言搜索，找到star、fork數(shù)量較高的，且開源協(xié)議友好的JS/TS開源三方庫(kù)進(jìn)行適配。

3. 如何進(jìn)行JS開源庫(kù)適配

由于OpenHarmony開發(fā)框架中的API不完全兼容V8運(yùn)行時(shí)的Build-In API，因此建議在適配JS三方庫(kù)前，使用[js-e2e]掃描三方庫(kù)，檢查是否存在node.js/web內(nèi)置模塊的依賴。

js-e2e工具時(shí)基于eslint進(jìn)行封裝，可分析出JS庫(kù)代碼對(duì)node.js/web瀏覽器的內(nèi)置模塊、對(duì)象的依賴及兼容ES標(biāo)準(zhǔn)版本，使用該工具，可以快速知道該庫(kù)是否依賴node.js/web內(nèi)置模塊。

如果掃描結(jié)果不依賴node.js/web內(nèi)置模塊，那么，這個(gè)庫(kù)將比較輕松地適配。如果大量依賴node.js/web內(nèi)置組件，這時(shí)可能需要fork源庫(kù)代碼，進(jìn)行侵入式修改，或者再找是否存在更適合的其他三方庫(kù)。

注：掃描時(shí)需同時(shí)掃描package.json文件中dependencies標(biāo)簽中直接依賴和間接依賴，因?yàn)榘l(fā)布OpenHarmony三方庫(kù)中心倉(cāng)時(shí)，需要將依賴的組件都發(fā)布。建議使用npm insall下載所有依賴的代碼后，一起掃描查看結(jié)果。

3.1 luxon開源庫(kù)信息

在npm中心倉(cāng)庫(kù)查看用于處理日期和時(shí)間的目標(biāo)庫(kù)luxon信息，包括開源倉(cāng)庫(kù)地址，主頁(yè)地址，版本，協(xié)議，文件大小，總文件數(shù)，最后發(fā)布時(shí)間等。

在OpenHarmony中心倉(cāng)搜索是否存在luxon目標(biāo)庫(kù)。

在luxon源代碼倉(cāng)庫(kù)查看star和fork數(shù)量，查看是否被經(jīng)常使用和經(jīng)常被維護(hù)。

luxon倉(cāng)庫(kù)：https://github.com/moment/luxon

3.2 JS三方庫(kù)掃描工具介紹

js-e2e是基于eslint進(jìn)行封裝、配置規(guī)則，用于分析JS庫(kù)代碼對(duì)NodeJS和Web瀏覽器的內(nèi)置模塊、對(duì)象的依賴及兼容ES標(biāo)準(zhǔn)版本的工具，支持檢查指定源碼目錄和指定三方庫(kù)的兼容性。

3.2.1 使用git工具同步j(luò)s-e2e代碼

3.2.2 安裝npm依賴包

3.2.3 安裝自定義的eslint輸出報(bào)告formatter，包含csv、csvsimple、vscode、vscodesimple

3.2.4 執(zhí)行檢查命令

3.3 適配luxon三方庫(kù)

1. 使用DevEco Studio開發(fā)者工具，創(chuàng)建OpenHarmony應(yīng)用工程。

2. 在工程中新建Module，選擇“Static Library”模板。

3. 移除library模塊src/main/ets目錄中的components目錄，刪除Index.ets文件中的代碼。
4. 直接復(fù)制js-e2e工具檢查時(shí)下載的luxon包（temp/node_modules/luxon），并將src目錄中的文件復(fù)制到library模塊的src/main/ets/lib目錄下。

5）修改Index.ets文件為其他開發(fā)者提供調(diào)用接口。

6. 在oh-package.json5中完善三方庫(kù)信息，如名稱、簡(jiǎn)介、版本、開源協(xié)議、作者、關(guān)鍵字等。

7. 在工程目錄中選中三方庫(kù)名稱，單擊菜單欄中的Build > Make Module ‘library’編譯構(gòu)建生成三方庫(kù)HAR包，HAR包可在模塊下的build目錄下獲取，包格式為*.har。

3.4 驗(yàn)證luxon三方庫(kù)

1. 打開entry/oh-package.json5配置文件，在dependencies標(biāo)簽中引入luxon三方庫(kù)，并單擊Sync Now進(jìn)行同步。

2. 打開pages/Index.ets頁(yè)面文件，引入luxon三方庫(kù)并顯示當(dāng)前日期。

至此，簡(jiǎn)單的JS開源三方庫(kù)適配OpenHarmony已經(jīng)完成了，下節(jié)我們將推出如何將講解如何進(jìn)行XTS測(cè)試，OpenHarmony三方庫(kù)發(fā)布標(biāo)準(zhǔn)，適配的三方庫(kù)發(fā)布到OpenHarmony三方庫(kù)中心倉(cāng)以及如何貢獻(xiàn)到OpenHarmony-TPC。
審核編輯 黃宇