У меня есть приложение React, которое работает в браузере.Это приложение содержит зависимость от внешней библиотеки (старая библиотека из моего проекта, написанная в старом стиле JS).Я включил этот файл с помощью тега сценария.
Теперь я решил сделать свое приложение React на стороне сервера.Какое место для внедрения этой библиотеки?
Вот так выглядит мой index.html (lib.js - это файл с этой внешней библиотекой, а compiled.js - это файл с компилируемым кодом через веб-пакет):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
<script src="/lib.js"></script>
<script src="/compiled.js" charset="utf-8"></script>
</body>
</html>
Проблема теперь в том, что мне нужно создать макеты для всех объектов из lib.js, например, мой файл server.js выглядит так:
require("@babel/register")({
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
["babel-plugin-inline-import", {
"extensions": [
".svg",
".png",
".jpg",
".mp4",
]
}]
]
});
if (typeof mySuperLib === 'undefined') {
global.mySuperLib = {
};
}
require('./server');
Если я это сделаюне включайте этот макет, я получаю ошибку сборки: ReferenceError: mySuperLib не определен
Но моя проблема глубже - рендеринг компонентов зависит от реальных значений, которые возвращает библиотека mySuperLib.У меня есть некоторые компоненты, подобные этому:
class MyPage extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div className="my-page">
{mySuperLib.needMoreContent()?'Some long content here':'Some short content here'}
</div>
);
}
}
export default MyPage;
Есть ли способы визуализации исходной версии страницы из HTML, которая будет возвращена с сервера, которая каким-то образом понимает, что приложение работает в браузере иповторно обработать этот компонент, вызвав реальный «mySuperLib».
Мой подход здесь верен или есть другие способы, как я могу добавить эти библиотеки в сборку?