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 等创建全局 prop，但没有成功。

有没有办法，怎么解决？谢谢你的时间

Answer 1

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

Webpack 具有 built-in 延迟加载模块功能。

您需要做的就是使用 import('path/to/my/lazy/module')，其中 returns 和 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 选项。

更多信息read this

Webpack 缩短属性名称

Webpack shorten property name

typescript

vue.js

webpack

systemjs

Webpack 缩短 属性 名称

Webpack shorten property name

typescript

vue.js

webpack

systemjs

Webpack 缩短属性名称