（可选）自定义前端编译

OM SDK提供的边缘管理系统前端开源代码，支持开发者在前端开源代码上新增或者修改Web界面的功能。若开发者在前端开源代码上新增或修改了功能，需要参考本章节重新编译，并构建软件包。

前提条件

在进行自定义前端编译之前，请确保环境已安装14.21.3版本的node.js和6.14.18版本的npm，并已配好npm的源，否则编译可能会出现异常或用时过长。
已获取omsdk-web.zip前端开源代码。

操作步骤

打开自定义前端编译功能开关。
将配置文件project.conf的“_NeedBuildCustomizedWeb”字段改为“yes”。文件路径为“{project_dir}/config/project_cfg/project.conf”。
将omsdk-web.zip前端开源包放在“{project_dir}/src/app/build_customized_web_project”路径下。

前端开源软件包名称必须以“omsdk-web”开头，且以“.zip”结尾。

在“{project_dir}/src/app/build_customized_web_project”目录下，实现编译脚本build_customized_web_project.sh，参考示例如下。

#!/bin/bash
CURR_DIR=$(dirname "$(readlink -f "$0")")
WEB_MANAGER_DIR=""
function build_web()
{
  cd "${CURR_DIR}"
  local web_zip="$(find "omsdk-web"*.zip -maxdepth 1 -type f)"
  local web_zip_basename="$(basename "${web_zip}" ".zip")"
  unzip -q -o "${web_zip_basename}.zip" -d "${CURR_DIR}"
  cd "${web_zip_basename}"
  npm install --ignore-scripts
  if (($? != 0)); then
    echo "[ERROR] npm install failed."
    return 1
  fi
  npm run build
  if (($? != 0)); then
    echo "[ERROR] npm run build failed."
    return 1
  fi
  cp -r dist/* "${WEB_MANAGER_DIR}/"
  return 0
}
function main()
{
  set -ex
  echo "##################### start to prepare web package ############################"
  if [ "$1" == "" || "$1" == "/" || "$1" == "~" ]; then
    echo "[ERROR] param is invalid."
    return 1
  fi
  WEB_MANAGER_DIR="$1"
  build_web
  if (($? != 0)); then
    echo "[ERROR] prepare web package failed."
    return 1
  fi
  echo "#################### prepare web package successfully ##########################"
}
main "$@"

在“{project_dir}/build/build.sh”中，实现调用扩展“_NeedBuildCustomizedWeb”开关的编译脚本。以下代码在build.sh文件中，需放在“_NeedCustomizedWebNav”和“_NeedCustomizedWebAssets”功能代码之前。

# 自定义前端编译功能
# build_customized_web_project.sh 具体实现可参考对应章节实现，本段代码需放在“_NeedCustomizedWebNav”和“_NeedCustomizedWebAssets”功能代码之前
# TOP_DIR={project_dir}
if [ "${_NeedBuildCustomizedWeb}" == "yes" ];then
     bash "${TOP_DIR}/src/app/build_customized_web_project/build_customized_web_project.sh" "${OMSDK_TAR_PATH}/software/nginx/html/manager"
     ret=$?
    if [ "$ret" != "0" ];then
        return 1
     fi
fi

使用示例

开发者新增的前端功能，在经过编译且部署到环境上后，可在边缘管理系统的Web界面看到自定义开发的功能，如图1所示。

图1 新增功能

父主题： 构建软件包