0
点赞
收藏
分享

微信扫一扫

#夏日挑战赛#提交一个ohos npm仓踩坑记录

干自闭 2022-07-29 阅读 25

本文正在参加星光计划3.0 – 夏日挑战赛

@toc

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注册地址
  • 设置下载npm包地址
    npm config set registry https://registry.npmjs.org/
  • 登录(定位到提交仓根目录,启用命令提示符工具)
    npm login

    image.png
    查看是否当前登录用户

    npm whoami

    image.png

  • 配置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": {}
    }
  • 在根目录下创建README.md(说明文件)、CHANGELOG.md(版本介绍文件)、LICENSE(许可证)
    image.png
  • 使用命令进行发布
    npm publish

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

    npm publish --access public

    image.png

  • 查找发布的npm包打开[npm官网](https://www.npmjs.com/)输入包名称`@tetcl/tetclui`进行搜索
    br/>打开[npm官网](https://www.npmjs.com/)输入包名称`@tetcl/tetclui`进行搜索
  • 在项目中引入,打开entry/package.json添加依赖
    {
    "dependencies": {
        "@tetcl/tetclui": "^1.0.0"
    }
    }

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

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

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

    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%')
    }
    }
  • 运行程序查看效果

image.png
image.png

想了解更多关于开源的内容,请访问:

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz

举报

相关推荐

0 条评论