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

npm is a js package manager. Through npm we can manage OpenHarmony third-party libraries.

Here we take the eTS component as an example

Create local component

IDE: DevEco Studio 3.0.0.900

First we create a new project

Select API 8, eTS

Wait for project to be completed

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.

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

Select Ohos Library

Give the module a name, here I will call it test, select eTS, Finish

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

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

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

The next step is to publish this component.

Create Gitee project

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

Initialize warehouse

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

Add README file

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

Make the repository open source

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

Publish components to Gitee

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

We first need to modify our package.json

{<!-- --><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

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

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

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

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

Next we install the components of version 1.0.1

npm install git + https://gitee.com/hytyj_hamstermie/ohos-test.git#1.0.1

Delete the .preview file and restart previewer