Webpack сокращает имя свойства


Webpack сокращает имя свойства

23.10.2020 09:39:24 Просмотров 52 Источник

У нас есть приложение Vue 2.x.x (typescript) наше приложение должно быть разделено на модули. Как /пользователи, / статьи, / отчеты и т. д. Это микро-фронтенд-архитектура.

Например, это решение: 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
            }
        }
    }

У нас есть импорт SystemJS из CDN, и когда мы транспилируем его с помощью webpack, мы не можем использовать System. import,но мы вынуждены использовать объект window.

Когда мы пытаемся использовать System. import webpack, он переносится в сокращенное свойство, например: l.импорт (...) Мы пытались создать глобально prop с помощью webpack DefinePlugin, ProvidePlugin и т. д., Но это не сработало.

Есть ли способ, как его решить? Спасибо за ваше время

У вопроса есть решение - Посмотреть?

Ответы - Webpack сокращает имя свойства / Webpack shorten property name

Является ответом!
felixmosh

23.10.2020 12:06:09

Если вы уже используете 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.

Для получения дополнительной информации прочтите это

Помочь в развитии проекта:
Закрыть X