使用ReactJS和NodeJS Web APP的Bot FrameWork IE问题

Question

嗨，我在Azure Web应用程序中使用了Nodejs和reactjs的机器人框架实现。 该代码在Edge，Chrome中工作正常，但在IE中，我得到空白页并附有错误。 下面是代码。 实际上，即使当我尝试microsoft在github上拥有的示例之一时，它也无法在IE中加载。 这是示例。

我做了一些研究，发现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'
                }
            }
        ]
    }
}

Answer 1

根据自述文件 ：

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

Web Chat没有计划支持IE11（ES5）的示例。

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

话虽这么说，自述文件提供了一种我最常使用的解决方法 。 您必须使用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的顶部 ：

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

确保对IE的支持 （我猜您缺少此部分）

在package.json ，确保browserlist包含： "ie 11" 。

注意：在默认的production列表中，它具有">0.2%" ， 覆盖了IE11