如何在React TypeScript应用中配置Elsa Workflow Designer？

我使用CRA脚手架创建了一个React TypeScript应用，执行命令如下：

npx create-react-app react-app-with-elsa --template typescript

接下来，我希望添加Elsa Workflow Designer（不运行时链接CDN脚本）。我尝试遵循官方安装文档的说明，但未成功。

我先尝试安装了旧版包：

yarn add @elsa-workflows/elsa-workflow-designer

但安装的是非常旧的版本，后续无法继续推进。

更新：我还尝试安装新版相关依赖：

yarn add moment @stencil/core monaco-editor @elsa-workflows/elsa-workflows-studio

但同样未成功。能否提供一份分步配置教程？

以下是在CRA创建的React TypeScript项目中集成Elsa Workflow Designer（本地依赖方式，不使用CDN）的完整步骤：

1. 清理旧依赖（若已安装） #

先卸载之前尝试的冲突包，避免版本混乱：

yarn remove @elsa-workflows/elsa-workflow-designer @elsa-workflows/elsa-workflows-studio moment @stencil/core monaco-editor

2. 安装正确的新版依赖 #

Elsa Workflows当前官方推荐的前端组件包为@elsa-workflows/elsa-studio，安装它及必需的配套依赖：

yarn add @elsa-workflows/elsa-studio @elsa-workflows/elsa-workflows-api-client monaco-editor react-router-dom

同时安装开发依赖以处理Monaco Editor的打包兼容问题：

yarn add -D @craco/craco monaco-editor-webpack-plugin

3. 自定义Webpack配置 #

CRA默认配置无法适配Monaco Editor的打包需求，需通过craco修改配置：

• 在项目根目录创建craco.config.js文件，写入以下内容：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new MonacoWebpackPlugin({
          languages: ['json']
        })
      ]
    }
  }
};

• 修改package.json中的脚本命令，替换为craco启动：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

4. 创建Elsa Designer组件 #

在src/components目录下新建ElsaDesigner.tsx组件：

import React, { useEffect, useRef } from 'react';
import { ElsaStudio } from '@elsa-workflows/elsa-studio';
import '@elsa-workflows/elsa-studio/dist/elsa-studio/elsa-studio.css';

const ElsaDesigner: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 初始化Elsa Studio组件
    const elsaStudio = document.createElement('elsa-studio');
    elsaStudio.setAttribute('server-url', 'http://localhost:5000'); // 替换为你的Elsa后端服务地址
    elsaStudio.setAttribute('designer-theme', 'light'); // 可选主题：light/dark

    containerRef.current.appendChild(elsaStudio);

    return () => {
      containerRef.current?.removeChild(elsaStudio);
    };
  }, []);

  return <div ref={containerRef} style={{ height: '100vh', width: '100%' }} />;
};

export default ElsaDesigner;

5. 在主应用中引入组件 #

修改src/App.tsx，替换原有内容为：

import React from 'react';
import './App.css';
import ElsaDesigner from './components/ElsaDesigner';

function App() {
  return (
    <div className="App">
      <ElsaDesigner />
    </div>
  );
}

export default App;

6. 启动验证 #

启动项目：

yarn start

确保你的Elsa后端服务已正常运行，访问http://localhost:3000即可看到Elsa Workflow Designer界面。

内容的提问来源于stack exchange，提问作者Starnuto di topo