Как создать встраиваемый компонент next. js (react) для сторонних веб-сайтов? - PullRequest
Новая
       134

Как создать встраиваемый компонент next. js (react) для сторонних веб-сайтов?

0 голосов
/ 04 августа 2020

Я пытаюсь создать виджеты, которые наши клиенты смогут вставить (встраивать) на их собственный сайт.

В идеале для стороннего использования, например:

example.html 

<div id="example"></div>
<script src="https://example.com/widgets/example.bundle.js"></script>
<script>
Example.init({
    selector: "#example",
    name: "example"
});
</script>

Я просто не могу понять, как «связать» определенные c точки входа до одного файла со следующим. js.

Я использую Vercel который создается из GitHub, поэтому в идеале я хочу, чтобы эти пакеты создавались при сборке, не нарушая существующий сайт next. js.

Что я пробовал:

next.config.js

module.exports = {
    entry: {
        example: './pages/example.js'
    },
    output: {
        path: "./public/widgets",
        filename: '[name].bundle.js'
    }
}

Результат:

Это ничего не дает, и я не понимаю, почему! : (

Полезные источники:

Github (Далее. js Обсуждения): Добавление записи Webpack для загрузки отдельно от main. js

Далее. js: Пользовательская конфигурация Webpack

Далее. js: Настройка каталога пользовательской сборки

Далее. js: exportPathMap

Stackoverflow: Написание встраиваемого Javascript плагина с React и Webpack

Webpack: Документация по конфигурации

1 Ответ

1 голос
/ 14 августа 2020

Прежде всего, ваш желаемый встроенный / инициализационный формат (который, конечно, типичен для встраиваемых виджетов) требует, чтобы загруженный скрипт создал глобальный объект Example, для которого вы затем можете вызвать .init(), который затем отобразит ваш widget html в тег, указанный в селекторе.

Next создает полную страницу, а не объект, который можно вызвать, как описано выше.

Чтобы изменить это, вам нужно переопределить следующий сервер , чтобы обойти весь процесс app.render() для определенных c URL-адресов и вместо этого создать объект Example, который выполняет свой собственный вызов ReactDOM.render() на .init().

Вам также необходимо рассмотреть два возможных сценария ios, когда веб-страница, в которую встроен ваш виджет, может быть страницей на основе React или нет. Таким образом, вам нужно либо использовать уже загруженный ReactDOM, либо заставить браузер загружать React, прежде чем вы сможете отобразить свой виджет.

Хотя все это выполнимо, нелегко сделать надежным и сделать это внутри Next JS делает его более громоздким. Я бы посоветовал структурировать код вашего приложения Next JS таким образом, чтобы части, которые вам нужны в виджете, были компонентами, которые вы могли использовать как в основном приложении Next JS, так и в отдельном встраиваемом виджете, используя простой CRA.

Дополнительная информация:

https://selleo.com/blog/how-to-create-embedded-react-widget (но не части iFrame)

https://meda.io/embed-react-into-an-html-web-page/

...