这是一个奇怪的特定问题,我无法在任何地方找到任何信息。
我有一个主要的React应用程序,可以动态加载其他React微型应用程序。它通过组件的componentDidMount()
功能执行此操作,使用纯JavaScript将script标记添加到文档主体的末尾,该标记的src地址代理请求到Web服务器,以返回单个捆绑文件,该捆绑文件是其子应用程序。加载。卸载组件后,将从文档正文中删除脚本标签,并且div根被清空。
迷你应用程序需要可装入一个捆绑包中(无需在此处进行介绍),我可以通过npm run build
运行如下所示的修改函数来构建react应用程序来实现此目的;
"scripts": {
"build": "npm run build:sass && npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js",
"build:sass": "node-sass --precision=5 --indent-type=space --output-style=nested --indent-width=2 src/styles/Site.scss src/styles/Site.css"
}
该命令的捆绑包部分使用下面的webpack.config.js文件;
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")
module.exports = {
entry: {
"bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
},
output: {
filename: "build/bundle.min.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new UglifyJsPlugin()],
}
反过来,这会产生一个bundle.min.js文件,其中包含微型应用程序中的所有脚本,node_modules和css,主应用程序通过以下组件加载该脚本。
export class MyComponent extends React.PureComponent<Props, object> {
componentDidMount() {
const script = document.createElement("script");
script.src = "myScriptSrc";
script.async = true;
script.id = this.AppIdToScriptId();
document.body.appendChild(script);
}
componentWillUnmount() {
document.getElementById("miniAppRoot").innerHTML = "";
if (this.props.app) {
document.getElementById(this.AppIdToScriptId()).remove();
}
}
AppIdToScriptId = () => "d" + this.props.App.Id.replace("-", "");
public render() {
return (<div id="miniAppRoot" ></div>);
}
}
export default MyComponent;
这一切都很好,我唯一遇到的问题是即使我删除了脚本标记并清空了html根之后,通过react微型应用程序捆绑脚本加载的css仍然存在。有谁知道为什么会这样吗?我不确定webpack配置是应归咎于客户端缓存还是其他可能性,如何解决此问题的任何想法?
在您的webpack配置中,您正在使用样式加载器。默认情况下,这是将样式添加为dom中的标签。
如果您的主应用程序加载CSS的方式与子应用程序加载CSS的方式不同,则您应该能够在卸载脚本标签后删除匿名样式标签。
否则,样式加载器确实允许您将属性注入到生成的样式标签中(或实际上以不同的方式加载样式)。那应该允许您找到子应用程序样式并将其从DOM中删除。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句