鸿蒙开发：如何实现一个hvigor插件

2025-06-26 19:57:10

114次阅读

0个评论

前言

本文API>=13，基于DevEco Studio 5.1.0 Release，版本号5.1.0.828

上篇文章，我们针对鸿蒙开发中的模块，实现了单一模块运行，使用的是hvigor插件的形式，通过hvigor插件，我们可以看到，它自动化执行了某些特定的任务，减少了我们的手动干预，确保了构建过程的一致可靠性，可以说，在实际的开发中，极大的提高了我们的开发效率，今天，我们这篇文章，就一起实现一个hvigor插件。

目前有两种方式实现hvigor插件，一种是基于hvigorfile脚本，另一种是基于基于typescript项目；两者有着一定的区别，hvigorfile脚本形式，直接写到项目中即可，便于我们针对脚本的更改，而typescript项目则需要发布后才能使用，如果你想开发后的插件，让更多的项目或更多的开发者使用，推荐typescript项目形式，就比如上篇文章的组件化运行插件，使用者只需简单的配置即可使用，如果仅仅是单一的项目使用，而且想便捷使用，那么推荐使用hvigorfile脚本。

两者主要区别如下：

基于hvigorfile脚本开发

这种开发方式，直接在工程的hvigorfile.ts文件或者模块下的hvigorfile.ts文件，编辑开发，可以说，非常的便捷，无须其他的额外配置，但是也有潜在的不足之处，那就是不便于在多个项目进行插件复用。

总体来说，实现起来非常的简单，仅仅需要三步，我们就可以实现。

第一步：导入接口

import { HvigorPlugin, HvigorNode } from '@ohos/hvigor';

第二步：实现自定义插件

function myPlugin(): HvigorPlugin {
  return {
    pluginId: 'myPlugin',
    apply(node: HvigorNode) {
      // 插件主体
      console.log('我是一个简单的插件');
    }
  }
}

第三步：使用插件

export default {
  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
  plugins: [
    myPlugin()
  ]
}

完整代码

import { appTasks } from '@ohos/hvigor-ohos-plugin';
import { HvigorPlugin, HvigorNode } from '@ohos/hvigor';

export default {
  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
  plugins: [
    myPlugin()
  ]
}


function myPlugin(): HvigorPlugin {
  return {
    pluginId: 'myPlugin',
    apply(node: HvigorNode) {
      // 插件主体
      console.log('我是一个简单的插件');
    }
  }
}

以上的步骤完成之后，在我们编译或者运行模块的时候，就会先去执行我们的插件主体：

比如这里，我们可以做很多的动作，如代码检查，配置检查，规范检查等等，你可以实现任何想要在构建之前要做的事情。

基于typescript项目开发

基于hvigorfile脚本开发方式虽然很方便，但是不易进行拓展，如果你想让更多的项目或者开发者快捷使用，那么还是得typescript项目开发。

第一步：初始化typescript项目

安装typescript模块

// 全局安装TypeScript
npm install typescript -g

npm init

在执行npm init的时候，会有很多步骤，我们可以直接使用默认的，按回车即可，这些信息，我们在生成后也可以单独秀气。

以上的命令执行完成之后，在新建的目录中就会创建一个package.json文件，这个就是命令中的那些信息：

生成typescript配置文件

// 初始化typeScript配置文件
tsc --init

生成信息如下：

第二步：开发插件

第一步完成之后，我们就可以进行插件开发了，首先配置npm镜像仓库地址，我们可以在用户目录下创建或打开.npmrc文件，配置如下信息：

registry=https://repo.huaweicloud.com/repository/npm/
@ohos:registry=https://repo.harmonyos.com/npm/

以上的信息配置完成之后，打开第一步生成的package.json文件，在devDependencies配置如下信息：

"devDependencies": {
  "@ohos/hvigor": "5.2.2"
}

配置好之后，执行如下命令，进行资源包下载：

npm install

执行完上述的命令后，我们可以新建自己的ts文件用于插件代码编写，写法呢，和基于hvigorfile脚本开发方式基本一致。

import { HvigorNode, HvigorPlugin } from '@ohos/hvigor';


export function myPlugin(): HvigorPlugin {
  return {
    pluginId: 'myPlugin',
    apply(node: HvigorNode) {
       console.log('我是一个简单的插件');
    }
  }
}

插件完成之后，然后在创建index.ts文件，并在该文件中声明插件方法的导出，如下代码

export { myPlugin } from './src/plugin/my-plugin';

第三步：发布插件

开发好的插件，如何让他人进行使用，那么就需要发布到npm平台，其发布方式，也是遵循npm发布规范，这里也简单总结一下，首先配置pm镜像仓库地址，在用户目录下创建.npmrc文件，配置您需要发布的镜像仓库。

registry=[npm镜像仓库地址]

配置pm镜像仓库地址完成之后，进行登录npm，执行如下命令，如果没有账号，还请到npm官方去注册。

npm login

登录完成之后，就可以进行发布了，执行如下命令，就可以将npm项目打包并发布至镜像仓库。

npm publish

第四步：插件使用

插件使用就很简单了，上篇文章中已经有过概述，大家可以查看上篇文章即可。