Modified Repost: [OpenHarmony application development] How to publish third-party application libraries on Gitee (Applies to GitHub)

Getting your Trinity Audio player ready...

npm is a js package manager. Through npm we can manage OpenHarmony third-party libraries. Here’s the actual work in this final tutorial.

IDE: DevEco Studio 3.0.0.900

Living In Harmony is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.

Subscribed

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries

First we create a new project

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_02

Select API 8, eTS

[OpenHarmony application development] How to publish third-party application libraries on Gitee_ide_03

Wait for project to be completed

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_04

We can see that there is a package.json file in the entry directory. Our third-party libraries will be installed under the entry using the npm command.

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_05

Next we have to create our own third-party component. Let’s create a new module.

[OpenHarmony application development] How to publish third-party application libraries on Gitee_ide_06

Select Ohos Library

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_07

Give the module a name, here I will call it test, select eTS, Finish. ArkTS language on API 9 comes with “Static Library”.

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_08

We can see that there is an index.ets file under the new module to export our components.

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_09

Here I re-wrote the MainPage.ets component. The component can be previewed using Previewer.

@Entry<br>@Component<br>export struct MainPage {<!-- --><br>  build() {<!-- --><br>    Column().height(100).width(100).backgroundColor(Color.Blue)<br>  }<br>}

Our component is a 100X100 blue block

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_10

How to use our local component? We are in the file ??entry/src/main/ets/MainAbility/pages/index.ets?

import { MainPage } from '../../../../../../test/index'<br><br>// You can also use import { MainPage } from 'test/index'<br>// It can also be previewed normally, but an error will be reported. It is recommended to use relative paths.<br><br>@Entry<br>@Component<br>struct Index {<!-- --><br>  build() {<!-- --><br>    Row() {<!-- --><br>      //our component<br>      MainPage()<br>    }<br>    .height('100%')<br>  }<br>}

Look at the effect, the component can be used normally

[OpenHarmony application development] How to publish third-party application libraries on Gitee_ide_11

The next step is to publish this component.

Create Gitee (GitHub) project

Log in to our Gitee (GitHub) and create a new warehouse to publish our components

[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_12

Initialize warehouse

No need to add .gitignore, please delete it if added

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_13

Add README file

[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_14

The initial warehouses are all private, we need to enter the management page

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_15

Make the repository open source

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_16

Get the warehouse address, my address here is https://gitee.com/hytyj_hamstermie/ohos-test.git or my address in Github:

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_17

Publish components to Gitee (GitHub)

Go into our test modules directory, this is what we need to publish

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_18

We first need to modify our package.json (oh-package.json5)

{<!-- --><br>  "name": "@ohos/test",<br>  #Add author<br>  "author": "talkweb_tiantianjiang",<br>  # You can modify the description yourself<br>  "description": "a npm package which contains arkUI2.0 page",<br>  "ohos": {<!-- --><br>    "org": ""<br>  },<br>  # This is the first version so it is 1.0.0<br>  "version": "1.0.0",<br>  "main": "index.ets",<br>  "types": "",<br>  # Here is our Gitee library address<br>  "repository": {<br>    "type": "git",<br>    "url": "https://gitee.com/hytyj_hamstermie/ohos-test.git"<br>  },<br>  #The license remains consistent with the Gitee library<br>  "license": "Apache License 2.0",<br>  "dependencies": {}<br>}

Next, we create a new git warehouse directly in this directory.

Recommend Git Bash and TortoiseGit

TortoiseGit is really convenient

Right click Git Bash Here
Excuting an order

$ git init

Associated with gitee warehouse

$ git remote add origin https://gitee.com/hytyj_hamstermie/ohos-test.git

Add all files to cache

$ git add .

Forcefully pull the master branch of the remote warehouse for the first time

$ git pull origin master --allow-unrelated-histories

Submit our code to the cache

$ git commit -m 'First version submission'

You can see that we have a master branch locally

$ git branch<br>* master

Publish our code to the master branch of the gitee repository

$ git push origin master
[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_19

NPM local installation component

Please do not add third-party libraries in DevEco IDE

Enter the project entry directory from the command line and execute the npm command

npm install git + https://gitee.com/hytyj_hamstermie/ohos-test.git
[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_20

You can see the changes in the IDE by clicking ??Sync Now??

[OpenHarmony application development] How to publish application third-party libraries on Gitee_Third-party libraries_21

We modify the reference path of the component in the ??entry/src/main/ets/MainAbility/pages/index.ets?? file

import { MainPage } from '@ohos/test'<br><br>@Entry<br>@Component<br>struct Index {<!-- --><br>  build() {<!-- --><br>    Row() {<!-- --><br>      MainPage()<br>    }<br>    .height('100%')<br>  }<br>}

Restart the previewer to see that the component is ready for use.

There is a problem with the new IDE. If it cannot be displayed or the updated content cannot be seen:

1. After deleting the .preview folder, restart previewer

2. Restart the IDE

[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_22

Component version management

To show here, I first create two version branches.

  • 1.0.0
  • 1.0.1
# Create and switch branch 1.0.0<br>$ git checkout -b 1.0.0<br># Submit the 1.0.0 branch<br>$ git push origin 1.0.0<br><br># Create and switch branch 1.0.1<br>$ git checkout -b 1.0.1

We modify the content under branch 1.0.1
??package.json??

{<!-- --><br>    ...<br>    "version": "1.0.1",<br>    ...<br>    <br>}

??entry/src/main/ets/MainAbility/pages/index.ets??

Change the square to red 400X400

@Entry<br>@Component<br>export struct MainPage {<!-- --><br>  build() {<!-- --><br>    Column().height(400).width(400).backgroundColor(Color.Red)<br>  }<br>}

commit branch

$ git commit -am "Version 1.0.1"<br>$ git push origin 1.0.1

Two branches can be seen on Gitee

[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_23

Next we install the components of version 1.0.1

npm install git + https://gitee.com/hytyj_hamstermie/ohos-test.git#1.0.1
[OpenHarmony application development] How to publish third-party application libraries on Gitee_Gitee_24

Delete the .preview file and restart previewer

[OpenHarmony application development] How to publish third-party application libraries on Gitee_OpenHarmony_25