Question

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

我遵循以下方法并运行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会将您的本地存储库复制到node_modules，并且导入/请求对“ botframework-webchat”的引用将正确解析。

您还可能希望通过私有或公开使用npm version和npm publish来发布自己的完整版本的npm软件包，作为自己的完整版本的repo。

不同的项目具有不同的构建策略，您的项目可能与上述内容有很大差异。如果您想使用一种可以广泛应用的集成方法，请考虑对该自述文件提出拉取请求。

我要按照以下步骤进行构建

建立网络聊天
克隆（或分叉）此仓库
npm安装
npm run build（用于在每次更改npm run watch上进行构建，以构建生产npm run预发布）

这将构建以下内容：

/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

我不确定您的问题是什么，因为您看起来可以编译该版本。如果您希望进行自定义更改，则可以进行预编译。

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

v4 Web聊天内置于React中，功能更强大，功能更全，与v3和v4 Bot Framework SDK完全兼容，并且受到完全支持（了解更多信息here）。

话虽如此，如果您打算使用v3，则应该使用this提供的基于React并准备集成的示例。

希望有帮助！

在React网站中添加microsoft / BotFramework-WebChat，并纳入Web Chat组件的自定义版本

1 个答案: