# 自定义构建插件

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

下面我们以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: 处理开发者自己的需求
   }