代码之家  ›  专栏  ›  技术社区  ›  Hansika Weerasena

将react小部件嵌入到4个站点时发生Polyfill冲突

  •  1
  • Hansika Weerasena  · 技术社区  · 7 年前

    webpack 4.29.3 babel 7 webpack-dev-server production <script type="text/javascript" src="myWidget.js"></script> html中的标记。我的网页配置如下:(我已经包括 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'
            })
        ]
    }};
    

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

    但是当我尝试将这个小部件嵌入到一个用Angular4编写的站点时,它说 TypeError: t.finally is not a function 虽然我已经包括了 polyfill 在react网页包版本中。我发现原因是 zone.js 在巴别塔多边形填充中。当我更新主机站点时(角度站点) 区域.js 版本来自 0.8.14 0.8.26 可嵌入小部件工作正常。我的问题是在实际场景中,我无法控制嵌入小部件的主机站点。那么在这种情况下,我该如何克服呢?

    0 回复  |  直到 7 年前
    推荐文章