首页 > 解决方案 > 在 React 网站中添加 microsoft/BotFramework-WebChat,合并 Web Chat 组件的自定义构建

问题描述

我想将https://github.com/Microsoft/BotFramework-WebChat/tree/v3集成到我的反应应用程序中。

我已按照以下方法运行 npm install 但它无法正常工作。我已将我的文件设置为 package.json 中的 botchat.js:

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "botframework-webchat": "file:../../BotFramework-WebChat-3/botchat.js.map"
  }

在 Botframework 文档中给出如下

在您的 React 网站中,合并 Web Chat 组件的自定义构建 最简单的方法是克隆(或分叉)此存储库,对其进行更改,构建它,然后在项目的 package.json 中引用您的本地构建,如下所示:

dependencies: {
    ...
    'botframework-webchat': 'file:/path/to/your/repo'
    ...
}

运行 npm install 会将您的本地 repo 复制到 node_modules,并且 import/require 对“botframework-webchat”的引用将正确解析。

你可能还希望使用 npm version 和 npm publish 将你的 repo 发布为它自己的完整的、版本化的 npm 包,无论是私下还是公开。

不同的项目有不同的构建策略,你的可能与上面有很大的不同。如果您想出一种您认为具有广泛应用的不同集成方法,请考虑为此自述文件提交拉取请求。

对于建筑,我遵循以下流程

这将构建以下内容:

/built/*.js compiled from the TypeScript sources in /src/*.js - /built/BotChat.js is the root
/built/*.d.ts declarations for TypeScript users - /built/BotChat.d.ts is the root
/built/*.js.map sourcemaps for easier debugging
/botchat.js webpacked UMD file containing all dependencies (React, Redux, RxJS, etc.)
/botchat.css base stylesheet
/botchat-es5.js is the Webpack bundle (a.k.a. botchat.js) plus polyfills for ES5 browsers
/botchat-fullwindow.css media query stylesheet for a full-window experience.

我想自定义我的 Botframework 并执行它

标签: reactjswebbotframeworkweb-chat

解决方案


我不确定你的问题是什么,因为看起来你能够编译构建。如果您希望进行自定义更改,那么您将进行这些预编译。

但是,我建议您改用 v4 BotFramework-WebChat,因为 v3 版本 (BotChat) 已弃用且不受支持(请阅读此处)。

v4 网络聊天内置在 React 中,更加健壮且功能齐全,与 v3 和 v4 Bot Framework SDK 完全兼容,并且得到完全支持(在此处了解更多信息)。

话虽如此,如果您打算使用 v3,那么您应该使用这个提供的基于 React 并准备好集成的示例。

希望有帮助!


推荐阅读