在 React 网站中添加 microsoft/BotFramework-WebChat，合并 Web Chat 组件的自定义构建

Question

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

我已经按照下面的方法和运行 npm install 但它 working.i 没有将我的文件设置为 botchat.js in package.json:

"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 组件的自定义构建最简单的方法是克隆（或分叉）这个 repo，更改它，构建它，然后在项目的 package.json 中引用本地构建，如下所示：

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

运行 npm install 会将您的本地存储库复制到 node_modules，并且 import/require 对 'botframework-webchat' 的引用将正确解析。

您可能还希望使用 npm version 和 npm publish 私下或公开将您的存储库发布为自己的完整的、版本化的 npm 包。

不同的项目有不同的构建策略，您的可能与上述差异很大。如果您提出了一种您认为具有广泛应用的不同集成方法，请考虑提交此 README 的拉取请求。

为了构建，我遵循了以下过程

建立网络聊天
克隆（或 fork）这个 repo
npm 安装
npm 运行构建（在 npm 运行观察的每个变化上构建，构建生产 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 并执行它

Answer 1

我不确定你的问题是什么，因为看起来你能够编译构建。如果您希望进行自定义更改，那么您可以执行 pre-compile.

但是，我建议您改用 v4 BotFramework-WebChat，因为 v3 版本 (BotChat) 已被弃用且不受支持（阅读 here）。

v4 网络聊天是在 React 中构建的，更健壮 full-featured，与 v3 和 v4 Bot Framework SDK 完全兼容，并且完全受支持（了解更多信息 here ).

也就是说，如果您打算使用 v3，那么您应该使用 this 提供的基于 React 并准备好集成的示例。

希望得到帮助！

在 React 网站中添加 microsoft/BotFramework-WebChat，合并 Web Chat 组件的自定义构建

Add microsoft/BotFramework-WebChat in React website, incorporate a custom build of the Web Chat component

web

reactjs

web-chat

botframework