У нас развернуто несколько приложений, которые были с простым html и js.Эти приложения должны быть полностью независимыми модулями, не влияющими на другие развернутые приложения.
Но мы должны иметь возможность загружать из одного приложения в другое, если потребуется ситуация, которая будет динамически решаться бизнесом.Мы смогли загрузить разные экраны приложений, просто указав относительный путь, так как ранее не было связывания зависимостей.
Теперь мы конвертируем их для реагирования приложений с веб-пакетом в качестве компоновщика.Здесь мы должны использовать динамический импорт, если нам нужно что-то динамически.Это также работает с шаблонами, которые следует указывать во время сборки.Так есть ли способ добиться такого динамического шаблона с помощью упаковщика веб-пакетов?
Для импорта компонентов экрана код выглядит примерно так:
Promise.all(reqList.map(modulePath =>
{
return import(/* webpackMode: "lazy-once" */`../../../${modulePath}.jsx`)
})).then(modules => {doStuff()})
Поскольку все они являются приложениями, развернутыми параллельно, мыпытаются вернуться назад к 3 папкам (т. е. к корневой папке, такой как webapps в tomcat) и получить доступ к другому пути приложения, который будет динамически получен в переменной modulePath.Таким образом, при импорте webpack пытается импортировать фрагменты, которые уже были загружены при первом запуске приложения.Но у этих загруженных блоков пока нет экранов из других приложений.
Мы попытались предоставить каждому jsx-файлу точку входа в веб-пакете, который создавал независимые файлы, но если мы сделаем их как файлы ввода, они должны быть прикреплены.в index.html вручную, что приведет к прекращению экспорта в jsx.
Моя конфигурация wepack выглядит примерно так:
function getEntries(pattern) {
const entries = {};
glob.sync(pattern).forEach((file) => {
let fileName = file.substr(0,file.indexOf("."));
entries[fileName.replace('src/', '')] = path.join(__dirname, file);
});
return entries;
}
let jsxFiles = getEntries('src/**/*.jsx');
console.log(Object.keys(jsxFiles));
module.exports = {
entry: jsxFiles,
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js',
chunkFilename: "AppId"+'.js'
}
}
Первое приложение загружается нормально, так как webpack можетнайти связанные блоки, но когда мы пытаемся загрузить различные компоненты экрана приложения, динамический импорт завершается неудачно, говоря, что модуль не найден.
Есть ли какой-нибудь способ, которым мы можем достичь такого вида динамического импорта?
Спасибо заПроходя через такой длинный пост, у меня не было выбора, кроме как объяснить ..:)