使用 ReactJS 和 NodeJS web APP 的 Bot FrameWork IE 问题答案

【问题标题】：Bot FrameWork IE Issue using ReactJS and NodeJS web APP使用 ReactJS 和 NodeJS web APP 的 Bot FrameWork IE 问题
【发布时间】：2019-07-30 02:59:39
【问题描述】：

您好，我在 Azure Web 应用程序中使用 Nodejs 和 reactjs 实现了机器人框架。该代码在 Edge、Chrome 中运行良好，但在 IE 中，我得到带有错误的空白页面。下面是代码。事实上，即使我尝试微软在 github 上的一个示例，它也无法在 IE 中加载。 Here 是示例。

我做了一些研究，发现 reactjs 在 IE 上确实存在一些渲染问题，我们应该在代码中使用 polyfill 包，但我仍然没有运气。

import 'react-app-polyfill/ie11';
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
import { createStore } from 'botframework-webchat';
import { createStyleSet } from 'botframework-webchat';
import updateIn from 'simple-update-in';
import "babel-polyfill";
import "isomorphic-fetch";
//import 'react-app-polyfill/ie11';

export class BotFrameworkApp extends React.Component {
    constructor() {
        super();

        this.state = {
            directLine: null,
            styleSet: null,

        };
    }
        const response = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer token',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Access-Control-Request-Headers': 'x-requested-with'
            },

            body: JSON.stringify({
                accessLevel: 'View',
                allowSaveAs: 'false',
            })
        });
        const { token } = await response.json();
        //already set and now send

        this.setState(() => ({
            directLine: createDirectLine({ token }),
            userName: loginID,
            webchatStore: createStore({}, middleware),
            styleSet: createStyleSet({
                hideUploadButton: true,
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',

            })
        }));



    }
    render() {
        const {
            state: { data }
        } = this

        return (
            this.state.directLine && this.state.webchatStore ?
                <ReactWebChat
                    className="chat"
                    directLine={this.state.directLine}
                    styleSet={this.state.styleSet}

                />
                :
                <div>Connecting to bot&hellip;</div>
        );
    }
}
ReactDOM.render(<BotFrameworkApp />, document.getElementById('root'));

这是错误，

我的 tsconfig

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

我的 Webpack-config.js

module.exports = {
    devtool: 'source-map',
    entry: './app.tsx',
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

【问题讨论】：

您使用的是哪个版本的IE浏览器版本？据我所知，BotFramework 支持 IE 11+。另外，请详细说明错误信息，我建议你可以参考这个帖子添加react application polyfill，使其在IE浏览器中运行良好。
嗨，谢谢你的回复。我使用的是 IE 11.557.17763.0...你能分享到 polyfill 线程的链接吗.....
你可以检查this thread和this article。
嗨志 - 我尝试了这两种方法仍然没有成功。
嗨@mdrichardson-MSFT 是的，根据您的建议，我能够解决这个问题。我确实“使用 polyfills 和像 babel 这样的转译器将代码从 ES6+ 转换为 ES5”

标签： node.js reactjs internet-explorer botframework

【解决方案1】：

Per the README:

Internet Explorer 不支持非 ES5 示例中所示的自定义。因为 IE11 是一个非现代浏览器，它不支持 ES6，并且许多使用箭头函数和现代 Promise 的示例需要手动转换为 ES5。如果您需要对应用进行大量自定义，我们强烈建议您为现代浏览器（如 Google Chrome 或 Edge）开发应用。

网络聊天没有计划支持 IE11 (ES5) 的示例。

对于希望手动重写我们的其他示例以在 IE11 中工作的客户，我们建议研究使用 polyfill 和 babel 等转译器将代码从 ES6+ 转换为 ES5。

话虽如此，我主要工作的自述文件sort of offers a workaround。你必须使用 CSS 来完成它。

创建您的应用

npx create-react-app my-app
cd my-app
npm i

安装附加模块

npm i -S babel-polyfill react-app-polyfill/ie11 botframework-webchat

注意：确保您使用的是最新版本的 botframework-webchat。该团队非常频繁地添加 IE11 兼容性修复程序。

向项目添加模块

把它放在你index.js的TOP：

import 'babel-polyfill';
import 'react-app-polyfill/ie11';

确保支持 IE（我猜你缺少这部分）

在package.json 中，确保browserlist 覆盖："ie 11"。

注意：在默认的production列表中，有">0.2%"，其中covers IE11

【讨论】：