Webpack缩短物业名称

Question

我们有Vue 2.x.x应用程序(类型记录)，我们的应用程序应该划分为模块。如/users、/articles、/reports等，它是一种微前端结构。

例如，这个解决方案：https://itnext.io/setup-a-micro-frontend-architecture-with-vue-and-single-spa-2c89528bf72f

我们希望基于用户权限动态加载这些模块，因此我们决定选择SystemJS。

export const ApplicationModuleService = {
   
    
        createModule(name: string, url: string, activeWhen = "/", props = {}): RegisterApplicationConfig {
            return {
                name,
                app: () => window.System.import(url), //system js is loading from cdn. in global.d has definition
                activeWhen,
                customProps: props
            }
        }
    }

我们从CDN中导入了SystemJS，当我们与webpack传输时，我们不能使用System.import，但是我们不得不使用window对象。

当我们试图使用System.import时，webpack将其转化为缩短的属性，如:l.import(.)我们曾试图与webpack、DefinePlugin、ProvidePlugin等人共同打造全球道具，但没有奏效。

有没有办法，怎么解决呢？谢谢您抽时间见我

Answer 1

如果您已经在使用webpack，则没有理由使用System.js作为模块加载程序。

Webpack有内置的延迟加载模块的功能。

您所需要做的就是使用import('path/to/my/lazy/module')，它返回一个在加载模块时将解析的Promise。Webpack将处理剩下的工作。

您的代码应该如下所示：

export const ApplicationModuleService = {
  createModule(name: string, url: string, activeWhen = '/', props = {}): RegisterApplicationConfig {
    return {
      name,
      app: () => import('path/to/lazy/module')
      activeWhen,
      customProps: props,
    };
  },
};

对于CDN支持，可以指定publicPath选项。

有关更多信息，阅读这篇文章