# 自定义构建插件

开发者除了正常使用小游戏提供的构建能力以外,还可以按需开发自己的自定义构建插件,来满足自身项目的构建需求。

下面我们以H5构建插件为例,来展示如何制作一个自定义构建插件

##新建构建插件文件夹

  1. 我们在 assets 目录下,新建一个 "BuildH5" 目录
  2. 在"BuildH5"目录下,新建一个 "Editor" 目录,后面我们会把该插件相关的代码文件放置到"Editor" 目录下

##实现插件的配置表单界面

配置表单UI界面,是通过 vue 组件的方式来实现的,我们在 assets/BuildH5/Editor 目录下新建一个 buildBuildH5Vue.ts 文件

该文件会完成以下几个事情:

  • 定义一个 class,同时在 class 定义上方加一个装饰器 @engine.decorators.CustomBuildComponent,表明这是一个自定义构建插件

  • 在 class 的成员变量中,初始化下面的值

    属性名 属性含义 必填
    selectWording 插件选项标题
    postProcessEntryFolder 插件中文名称
  • 开发 vue 组件,实现表单UI相关的逻辑操作,可查看下方的示例代码片段

  • 初始化构建过程中的默认配置项,在 vuexModule 的 state 中的customConfig对象初始化默认配置项,目前默认配置项如下:

    属性名 属性含义 属性值
    shouldWindowDefineEngineCode 将框架代码打包到入口js文件中,在浏览器环境下或者是没有fs读取能力的环境下,需要设置该属性为true Boolean,默认为false
    useLocalServer 构建面板中,显示本地服务器开关 Boolean,默认为false
  • 在 vue 的 methods 属性中,实现一个函数名为 "isAllConfigValid" 的校验函数,该函数在用户点击 "确认时" 会触发,该函数的返回值参数如下:

    参数名 含义
    valid Boolean 类型,true 代表数据合法,false代表数据不合法
    errMsg 错误信息,如果valid为false,会显示这个错误提示给到用户
import engine from "engine"

// @ts-ignore
@engine.decorators.CustomBuildComponent("BuildH5")
export default class BuildH5 {
  public selectWording = '构建H5小游戏'   // 插件选项标题
  public platformWording = 'H5小游戏'   // 插件中文名称
  public vueObject = {    // vue 组件对象
    name: "BuildH5",
    template: ` // vue的html字段
      <div>表单逻辑</div>
    `,
    data: function() {
      return {
        uglify: false,
      }
    },
    computed: {
      config() {
        if (this.$store.state.BuildH5.customConfig) {
          this.uglify = this.$store.state.BuildH5.customConfig.uglify
        }
        return this.$store.state.BuildH5.customConfig
      }
    },
    methods: {
      isNumber(val) {
        var regPos = /^[0-9]+.?[0-9]*/
  
        if(regPos.test(val) ){
          return true
        }else{
          return false
        }
      },
      isAllConfigValid() { // 检查函数, 必须要实现
        return {
          valid: true,
          errMsg: '',
        }
      },
    },
  }
  public vuexModule = {
    state: {
      customConfig: {
        canvasWidth: undefined,
        canvasHeight: undefined,
        uglify: false,
        shouldWindowDefineEngineCode: true,
        useLocalServer: true,
      }, // 每一个 自定义插件,都需要实现一个 customConfig 对象
    },
    mutations: {
      updateConfig(state, payload) { 
        payload = payload || {}
        Object.assign(state.customConfig, payload)
      },
    },
    actions: {},
  }
}

# 实现插件的后处理能力

通过上面的步骤,我们已经能完成前端表单页面的配置开发,接下来,我们需要开发构建的后处理脚本。该脚本会在小游戏构建流程之后触发,是一种构建的后处理能力。

  1. 在 assets/BuildH5/Editor 下新建一个文件夹 "isolateScript",我们会把脚本放到该目录下,放到该目录下的脚本,会在具备 nodeJS 能力的环境下运行。

  2. 在 isolateScript 文件夹下,新建一个 index.ts 文件,该文件是整个后处理能力的入口文件,同时,文件中定义一个默认函数,该函数即为逻辑执行入口

    入参名称 入参含义
    multiConfigItem 表单页面中用户配置的最终结果会透传过来
    gameJson 小游戏gameJson配置
    projectRootAbPath 小游戏项目的绝对路径
    /**
    * 构建后处理入口函数
    * @param multiConfigItem 表单页面中用户配置的最终结果会透传过来
    * @param gameJson 小游戏gameJson配置
    * @param projectRootAbPath 小游戏项目的绝对路径
    */
    export default async function(multiConfigItem, gameJson, projectRootAbPath) {
      // TODO: 处理开发者自己的需求
    }