Webpack сокращает имя свойства
У нас есть приложение 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
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.
Для получения дополнительной информации прочтите это