【避坑总结】提交一个ohos npm仓踩坑记录

鸣涧

【避坑总结】提交一个ohos npm仓踩坑记录

1. HarmonyOS/OpenHarmony npm包（what）

npm包是提供给开发者解决相对问题的三方依赖文件，而HarmonyOS/OpenHarmony npm包是针对HarmonyOS/OpenHarmony开发提供的三方依赖文件。

2. 提交npm仓原因（why）

开发多个HarmonyOS/OpenHarmony 应用程序时，对于打印日志、字符串处理、数据请求、ICON图标进行二次封装后，每新增一个项目都要将这些文件拷贝到相应的项目下才能够使用，为了易于维护，减少代码量，一处改动所有项目适配（“懒”是程序优化推动的源动力），特此淌了一下HarmonyOS/OpenHarmony npm仓提交的坑。

3. npm中央仓提交大法（how）

HarmonyOS/OpenHarmony npm包可以发布到npm官方中心仓，也可以发布到DevEco Marketplace提供的HarmonyOS npm专有仓，本节以npm中心仓为主  （因为HarmonyOS npm专有仓没有成功，有成功的大佬不吝赐教） 。

• npm账号注册（如果有账号则忽略跳过此步骤）
• npm注册地址（https://www.npmjs.com/）
• 设置下载npm包地址
  
  

• 
  

npm config set registry https://registry.npmjs.org/

1.1.1.

（左右移动查看全部内容）

• 登录（定位到提交仓根目录，启用命令提示符工具）
  
  

• 
  

npm login

1.1.1.

（左右移动查看全部内容）

查看是否当前登录用户

• 
  

npm whoami

1.1.1.

（左右移动查看全部内容）

• 配置package.json
  
  

• 
  

{

  "name": "@tetcl/tetclui", // 包名称，全平台唯一

  "version": "1.0.0",  // 包的版本号

  "description": "一个HarmonyOS/OpenHarmony App UI库", // 包的功能描述

  "ohos": {

    "org": "tetcl"

  },

  "author": {  // 作者

    "name": "bxming",

    "email": "649579772@qq.com"

  },

  "license": "ISC",  // 包遵循的开源协议

  "types": "",

  "devDependencies": {},

  "main": "index.ets",  // 包默认执行的入口文件

  "repository": {},

  "dependencies": {}

}

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.

（左右移动查看全部内容）

在根目录下创建README.md(说明文件)、CHANGELOG.md(版本介绍文件)、LICENSE(许可证)

使用命令进行发布

• 
  

npm publish

1.1.1.

（左右移动查看全部内容）

当包名为@xxx/xxx时，npm publish默认发布为私有仓，私有仓是需要付费的，所以需要按照以下命令进行发布

• 
  

npm publish --access public

1.1.1.

（左右移动查看全部内容）

查找发布的npm包

打开npm官网输入包名称@tetcl/tetclui进行搜索

在项目中引入，打开entry/package.json添加依赖

• 
  

{

  "dependencies": {

    "@tetcl/tetclui": "^1.0.0"

  }

}

1.2.3.4.5.1.2.3.4.5.1.2.3.4.5.

（左右移动查看全部内容）

然后点击编辑器顶部Sync Now进行同步。

同步完成后会在entry模块下出现node_modules文件夹，其中就有我们发布的npm包源码。

在entry ---> pages/index.ets文件中引入TeHttp，因为TeHttp是泛型，所以先定义一个接口返回结果处理类。

• 
  

import {TeHttp, TeLog} from '@tetcl/tetclui'

import {RestfulApi} from '../common/RestfulApi'

const TAG = "Index"

@Entry

@Component

struct Index {

  @State message: string = 'Hello World'

  build() {

    Flex({alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {

      Button(this.message, {type: ButtonType.Normal})

        .width('100%').height(64)

        .onClick(() => {

          TeLog.printInfo(TAG, "***************************")

          new TeHttp<RestfulApi>().get('https://api.apiopen.top/api/sentences').then((res) => {

            TeLog.printInfo(TAG, JSON.stringify(res))

            let result: RestfulApi = res;

            this.message = result.result.name

          })

        })

    }

    .width('100%').height('100%')

  }

}

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.

（左右移动查看全部内容）

运行程序查看效果