当我使用webpack-5';s Library目标:窗口
我正在使用单个spa创建我的应用程序。 当我加载micro frontend应用程序时,我没有使用SystemJS,如下所示:当我使用webpack-5';s Library目标:窗口,webpack,micro-frontend,single-spa,webpack-5,Webpack,Micro Frontend,Single Spa,Webpack 5,我正在使用单个spa创建我的应用程序。 当我加载micro frontend应用程序时,我没有使用SystemJS,如下所示: export const runScript = async (url: string) => { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.
export const runScript = async (url: string) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
const firstScript = document.getElementsByTagName('script')[0];
(firstScript as any).parentNode.insertBefore(script, firstScript);
});
};
const loadApp = async (appPath: string) => {
try {
await runScript(`/${appPath}/index.js`);
console.log(appPath, '=', (window as any)[appPath]);
} catch {
console.log("load child app's javascript file error。");
}
return (window as any)[appPath];
};
singleSpa.registerApplication({
name: 'app1',
app: () => loadApp('app1'),
activeWhen: '/app1,
customProps: {
},
});
因此,我在app1的网页配置中使用了libraryTarget:'window'
devServer: {
//...
libraryTarget:'window'
},
当我使用webpack4时,它工作得很好
但是当我将webpack更新为webpack-5时,它似乎有什么错误,webpack生成的输出代码无法为window对象设置正确的值
网页-4:
网页-5:
这是webpack-5的问题吗?我个人将webpack 5用于我的单个spa角组件。我有
umd
aslibraryTarget
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"libraryName": "mylib",
"libraryTarget": "umd"
}
加载脚本时,我的应用程序位于窗口下
谢谢,但是React应用程序使用webpack dev server在本地环境启动,似乎是“webpack dev server”的错误。啊,对不起,是的,确实我的答案不相关,我尝试过,angular自定义网页包库与libraryTarget窗口配合良好我发现了您在网页包开发服务器上创建的问题我猜您正在等待修复,以便在本文中共享它