2

webpack 4.29.3反応を使用して記述された埋め込み可能なウィジェットがあり、 andを使用して単一の js ファイルにバンドルされていますbabel 7。タグをhtmlに挿入するだけでwebpack-dev-server、すべてが正常に機能します。私のwebpack構成は次のとおりです:(私は含めました)production<script type="text/javascript" src="myWidget.js"></script>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"
  ]
}

しかし、Angular 4 で記述されたサイトにウィジェットを埋め込もうとすると、react webpack ビルドTypeError: t.finally is not a functionに を含めていると表示されます。angular でバベルのポリフィルをオーバーライドするpolyfillことが理由であることがわかりました。zone.jsホスト サイト (Angular サイト) のzone.jsバージョンを0.8.14から0.8.26埋め込み可能なウィジェットに更新すると、正常に動作します。私の質問は、実際のシナリオでは、ウィジェットが埋め込まれているホスト サイトを制御できません。では、そのようなシナリオでは、どうすればそれを克服できますか?

4

0 に答える 0