@hyext/builder-webview

builder-webview

初始化

• 新建一个项目目录如 my-project
• 将游戏引擎导出的文件复制到 my-project 目录内, 如 game-files
• 进入 my-project 目录, 执行 npm init -y 初始化项目
• 添加 @hyext/cli 依赖: npm i @hyext/cli -D
• 生成配置: npx @hyext/cli init -b @hyext/builder-webview

配置

builder-webview 的配置在 project.config.json 的 builder.config 中配置:

// 具体内容请查看 src/typings.ts
export interface BuilderConfig {}

其中 buildConfig 的类型为:

// 具体内容请查看 src/typings.ts
export interface BuildConfig {}

开发, 测试, 发布

在虎牙直播APP或者虎牙直播助等app环境执行时, 可使用 buildConfig 的 entry 字段来指定入口的 react-native 文件. 如果想直接显示html的内容, 可使用 @hyext/gameview 组件来简化编码, 详情请翻阅 gameview 文档

其他流程请翻阅虎牙小程序官方文档: https://dev.huya.com/docs/

插件

可以在配置里添加插件来跑一些自动化的脚本, 在 project.config.json 的 builder.config.plugins 中配置插件. 形式和babel插件类似, plugins中的每一项都是一个数组, 第一项是插件的名称, 第二项是插件的参数. 如果不需要配置参数, 也可以直接写插件名称

插件名称可以写成相对路径, 绝对路径, 也可以写成npm包名 为了安全考虑, 在云端构建时, 只有在白名单内的npm包(以@hyext开头)才会生效

目前同一个钩子的插件会按出现的顺序执行.

可配置如下钩子:

• preStart: 开发阶段, 在builder启动内置开发服务器前执行
• startResolved: 开发阶段, 在builder内置开发服务器就绪后执行
• preRelease: 在执行 hyext-release 打包代码, 打包前执行
• releaseEnd: 在执行 hyext-release 打包代码, 打包完成后执行

插件以函数的形式存在, 该函数返回一个 PluginConfig 对象:

export interface PluginConfig {
  name: string

  preStart?: (opt: StartPluginOpt) => void
  startResolved?: (opt: StartPluginOpt) => void
  preRelease?: (opt: ReleasePluginOpt) => void
  releaseEnd?: (opt: ReleasePluginOpt) => void
}

export type ProjectConfig = ExtCLI.ProjectConfig<BuilderConfig>
interface PluginContext {
  projectConfig: ProjectConfig
  inputPath: string
  error?: Error
}
type StartPluginOpt = PluginContext & { distDir: string, buildResult?: ExtCLI.BuildResult }
type ReleasePluginOpt = PluginContext & { releaseDir: string, releaseZip?: string }

一个简单的例子如下:

// plugin-demo.js
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

module.exports = function (options) {
  return {
    name: 'plugin-1-name',
    preStart: async (opt) => {
      await sleep(1000)
      console.log('plugin-1 preStart', opt)
    },
    startResolved: async (opt) => {
      console.log('error.message', opt.error.message)
      await sleep(2000)
      console.log('plugin-1 startDone', opt)
    },

    preRelease: async (opt) => {
      await sleep(2000)
      console.log('preRelease', opt)
    },
    releaseEnd: async (opt) => {
      await sleep(2000)
      console.log('releaseEnd', opt)
    },
  }
}



// project.config.json

{
  "builder": {
    "name": "@hyext/builder-webview",
    "config": {
      "webTitle": "TestAuto2",
      "https": true,
      "h5Dir": "h5",
      "buildConfig": [
      ],
      "plugins": [
        [
          "./plugin-demo.js",
          {
            "bar": true,
          }
        ]
      ]
    }
  }
}