0

我正在使用单水疗中心来创建我的应用程序。我在加载微前端app的时候，没有使用SystemJS，如下：

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: {
  },
});

所以，我libraryTarget:'window' 在 app1 的 webpack 配置中使用。

devServer: {
  //...
  libraryTarget:'window'
},

当我使用 webpack4 时它工作正常。

但是当我将 webpack 更新到 webpack-5 时，似乎出现了问题，webpack 生成的输出代码无法为 window 对象设置正确的值。

webpack-4： 在 webpack-4 上运行良好

webpack-5： 对象中没有任何内容

这是 webpack-5 的问题吗？

4

1 回答 1

0

我个人将 webpack5 用于我的单 spa-angular 组件。我umd有libraryTarget

 "customWebpackConfig": {
     "path": "./extra-webpack.config.js",
     "libraryName": "mylib",
     "libraryTarget": "umd"
 }

https://github.com/milobella/application-web/blob/master/spa-menu/angular.json#L36-L37

window当加载脚本 https://github.com/milobella/application-web/blob/master/portal/src/main.ts#L9时，我的应用程序就在这里

于 2020-10-24T07:15:45.403 回答