Блог

Главная - Вопросы по программированию - Как я могу глобально включить преакт/хуки в свое приложение и использовать его в своем расширении?

Как я могу глобально включить преакт/хуки в свое приложение и использовать его в своем расширении?

#typescript #preact #microbundle

Вопрос:

Я создаю приложение на typescript/preact, в котором есть расширения, которые могут быть установлены по требованию. Я использую preact глобально, так что не каждое расширение включает его в качестве зависимости, но у меня возникают проблемы с доступом к preact/крючкам из расширения.

Preact включен в качестве глобального с помощью тега сценария в основной index.html файл:

 <script src="/assets/js/vendor/preact.min.js"></script>

Я использую webpack для создания своего основного приложения, где я использую атрибут externals, указывающий, что preact уже доступен.

 externals: {
  preact: 'preact',
}

Расширения включаются в приложение путем считывания списка из API JSON, а затем динамической загрузки их файла .js, из которого глобальная функция вызовет глобальную функцию для регистрации.

Я использую microbundle для создания расширения в виде файла пакета, где я указываю, что preact является глобальной переменной:

 microbundle build --css external --globals preact=preact

Пока это работает. Компоненты отрисованы правильно, так что никаких проблем нет. Проблема в том, что я хочу использовать хук useState в компоненте. Обычно в предустановленном режиме вы импортируете его, выполнив:

 import { useState } from preact/hooks';

Когда я сейчас использую расширение загрузки, я получаю сообщение об ошибке:

 Uncaught (in promise) TypeError: o is undefined
    <anonymous> remote-server-control.umd.js:1
    H index.js:525
    N index.js:206
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    k component.js:128
    k component.js:218
    w component.js:206
    setState component.js:50
    __ Preact
    Redux 3
    P Preact
    Redux 4
    o utils.ts:11
    dispatch Redux
    C index.ts:223
    o utils.ts:8
    u Redux
    componentWillMount index.tsx:48
    N index.js:145
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    I render.js:36
    <anonymous> App.tsx:37
    async* index.ts:29
    Webpack 5
remote-server-control.umd.js:1:622
Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: http://localhost:3192/extensions/remote-server-control/assets/remote-server-control.umd.js
Source Map URL: remote-server-control.umd.js.map

Я проверил, что при отключении импорта крючка useState проблема не возникает. Поскольку импорт предварительных действий/крючков-единственное изменение, которое я делаю, у меня такое чувство, что это связано с этим, и именно здесь я застрял. Как я могу сделать предустановки/крючки доступными по всему миру для использования расширений, чтобы код не дублировался в каждом расширении?

Я попытался добавить его к флагу globals в команде microbuild, но безуспешно.

 microbundle build --css external --globals preact=preact,preact/hooks=preact/hooks

Метки: