Импорт и запуск автономного приложения React внутри веб-компонента - PullRequest
Новая
       5

Импорт и запуск автономного приложения React внутри веб-компонента

0 голосов
/ 28 декабря 2018

У меня есть отдельное приложение React, которое использует веб-пакет для пакетирования с требованием возможности запуска этого пакета в веб-компоненте.Кто-нибудь может подсказать, как мне подходить к этому?

Я думаю что-то вроде: 

//webpack.config.js
output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        library: 'reactUmd',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },

//react-component.js
import '../../packages/react-umd/dist/bundle.js'

class ReactComponent extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    reactUmd.renderSomeComponentTo(mountPoint)
  }
}

customElements.define('react-component', ReactComponent)

Но я не уверен, как я могу импортировать скомпилированный пакет и получить ссылку на React, ReactDOM, главный компонент и т. Д., Будет ли экспорт, так как UMD предоставит мне необходимые ссылки?

1 Ответ

0 голосов
/ 28 декабря 2018

Таким образом, вы в основном хотите получить доступ к компоненту реакции вне минимизированного файла пакета.

Вот один из подходов:

  • Вы указываете веб-пакету создатьбиблиотека для вашего файла.Это в основном создаст глобальную переменную, с помощью которой вы сможете получить доступ ко всем экспортируемым функциям из вашего файла ввода js.Для этого добавьте ключ с именем library в конфигурацию вашего веб-пакета в output объект.

    module.exports = { entry: './main.js', output: { library: 'someLibName' }, ... }

  • После этого перезапустите сервер веб-пакетови в консоли введите window.someLibName.Это должно напечатать все методы, экспортируемые main.js как объект.

  • Следующим шагом является создание функции, которая принимает элемент DOM и отображает компонент реагирования на элементе..Функция будет выглядеть примерно так:

    export const renderSomeComponentTo = (mountNode) => { return ReactDOM.render(<App />,MOUNT_NODE); }

  • Теперь вы можете получить доступ к вышеуказанной функции из любого места в проекте, используя

    const mountNode = document.getElementById('theNodeID'); window.someLibName.renderSomeComponentTo(mountNode);

Таким образом, весь код, реагирующий на реакцию, абстрагируется:)

Надеюсь, я ответил на ваш вопрос.Не забудьте поразить звезду и поднять голос.Ура ?

...