reactjs - 在 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 包,无论是私下还是公开。
不同的项目有不同的构建策略,你的可能与上面有很大的不同。如果您想出一种您认为具有广泛应用的不同集成方法,请考虑为此自述文件提交拉取请求。
对于建筑,我遵循以下流程
- 建立网络聊天
- 克隆(或分叉)这个 repo
- npm 安装
- npm run build(在每次更改的基础上构建 npm run watch,构建生产 npm run prepublish)
这将构建以下内容:
/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 并执行它