reactjs - 将反应小部件嵌入到 Angular 4 站点时的 Polyfill 冲突

Question

webpack 4.29.3我有一个使用 react 编写的可嵌入小部件，并使用和捆绑到单个 js 文件中babel 7。一切正常webpack-dev-server，production只需在 html 中插入<script type="text/javascript" src="myWidget.js"></script>标签即可。我的 webpack 配置如下：（我已经包含babel-polyfill）

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = env => {
let htmlTemplate = "./public/index.html";
return {
    entry: [ "@babel/polyfill","./src/index.js"],
    output: {
        path: __dirname + '/dist',
        filename: 'chat.js',
        library: 'Chat',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: htmlTemplate,
            filename: "./index.html",
            inject: 'head'
        })
    ]
}};

我的 babel 配置如下：

  {
  "presets": [
    "@babel/env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

但是，当我尝试将小部件嵌入到以 Angular 4 编写的网站时，它说TypeError: t.finally is not a function虽然我已将其包含polyfill在 react webpack 构建中。我发现原因是zone.jsangular 覆盖了 babel polyfill。当我将主机站点（角度站点）zone.js版本从0.8.14可0.8.26嵌入小部件更新为工作正常时。我的问题是在实际情况下，我无法控制嵌入小部件的主机站点。那么在这种情况下，我该如何克服呢？

标签： reactjswebpackbabeljsbabel-polyfillzonejs