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
埋め込み可能なウィジェットに更新すると、正常に動作します。私の質問は、実際のシナリオでは、ウィジェットが埋め込まれているホスト サイトを制御できません。では、そのようなシナリオでは、どうすればそれを克服できますか?