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
可嵌入小部件工作正常。我的问题是在实际场景中,我无法控制嵌入小部件的主机站点。那么在这种情况下,我该如何克服呢?