Как экспортировать приложение ReactJS как пакет для использования в другом приложении? - PullRequest
Новая
       6

Как экспортировать приложение ReactJS как пакет для использования в другом приложении?

0 голосов
/ 10 мая 2018

Я использую webpack и babel для сборки моего приложения, и приложение успешно собирается в файле bundle.js.

У меня есть файл index.jsx, который имеетэтот код 

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('app'));

В компоненте приложения загружается куча других компонентов.

У меня есть файл index.html в том же приложении.

<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Я открываю файл index.html из системного каталога, прямо в браузере, и приложение работает нормально.

Я хочу использовать bundle.js файл и загрузите мой скрипт в другое html / javascript-приложение, которое запускает то же самое приложение внутри него.

Я нашел этот Написание встраиваемого плагина Javascript со ссылкой React & Webpack , который показывает, как онудалось использовать это.

Где он использует 

export const init = (config) => {
  ReactDOM.render(<MyReactApp config={config} />, someSelector);
}

Как я могу преобразовать мой файл index.jsx, чтобы его можно было использовать в другом приложении, так же, как он используется в ответе на данную ссылку.

1 Ответ

0 голосов
/ 10 мая 2018

Как он говорит в другом ответе 

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.yourExportedFunction();
</script>

Но это только для использования экспортируемой функции. Похоже, что вы хотите, чтобы все ваше приложение отображалось в другом файле index.html в каком-то другом приложении, поэтому в вашем index.html другого приложения вам понадобится: 

<div id="app"></div>

и 

<script src=".path/to/other/project/bundle.js" type="text/javascript"></script>

тогда приложение будет отображаться внутри вашего тега div#app, потому что это то, что делает ваша библиотека: 

render(<App />, document.getElementById('app'));
...