label-studio前端如何支持热更新

Label Studio简介

Label Studio 是一款功能丰富、灵活便捷且易于使用的数据标注工具，广泛应用于各种机器学习和深度学习项目中的数据标注工作。其开源代码托管在 GitHub，允许开发者根据需求进行定制化开发。

然而，官方文档主要侧重于使用 Docker 运行项目，对于前端代码的二次开发及热更新配置并未详细说明。本文将详细介绍如何配置 Label Studio 前端开发环境，并实现热更新功能，以便开发者能够更高效地进行前端定制化开发。

环境准备

在开始前端二次开发之前，确保你的本地开发环境满足以下要求：

Node.js: 确保已安装 Node.js（建议使用 LTS 版本）。
Yarn: Label Studio 使用 Yarn 作为包管理工具，请确保已安装 Yarn。

克隆项目并安装依赖

git clone https://github.com/HumanSignal/label-studio.git
cd ./web
yarn install

修改 web/apps/labelstudio/src/index.html 文件

<script type="text/javascript">
  window.APP_SETTINGS = {
    hostname: 'https://demo.com',
    allow_organization_webhooks: false,
    user: {"id":7,"username":"demo","firstName":"","lastName":"123123@qq.com","initials":"1","email":"demo@qq.com","allow_newsletters":false,"avatar":"/data/avatars/1907ea70-20240308-145001.jpeg"}
  }
</script>

在 /web/tsconfig.base.json 文件中手动引入 datamanager 的 sdk 文件

{
  "compilerOptions": {
    "paths": {
      "@web/datamanager": ["libs/datamanager/src/sdk/index.js"]
    }
  }
}

修改 web/libs/editor/src/index.js 文件

import "./core/feature-flags";
import "./assets/styles/global.scss";
import { LabelStudio } from "./LabelStudio.tsx";

window.LabelStudio = LabelStudio;

export default LabelStudio;
export { LabelStudio };

执行 npm run lsf:watch 命令

使用本地开发环境配置构建项目并启用监听模式。如果 LabelStudio 核心模块代码有所改动，则自动打包，实现热更新。

在 web/apps/labelstudio/src/app/app.jsx 文件中引入核心模块

import { LabelStudio } from "../../../../dist/libs/editor/main.js";
import "../../../../dist/libs/editor/main.css";
import { DataManager } from "@web/datamanager";
window.DataManager = DataManager;

执行 nx run labelstudio:serve 命令

这将启动服务，使您可以查看您的更改并继续进行开发。