（可选）自定义前端编译

前提条件

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

操作步骤

1. 打开自定义前端编译功能开关。

   将配置文件project.conf的“_NeedBuildCustomizedWeb”字段改为“yes”。文件路径为“{project_dir}/config/project_cfg/project.conf”。

2. 将omsdk-web.zip前端开源包放在“{project_dir}/src/app/build_customized_web_project”路径下。
   

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

3. 在“{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 "$@"

4. 在“{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 新增功能