0

我正在 typescript/preact 中构建一个应用程序，它具有可以按需安装的扩展功能。我在全局范围内使用 preact，因此并非每个扩展都将其作为依赖项包含在内，但我在从扩展访问preact/hooks时遇到问题。

Preact 通过主要 index.html 文件中的脚本标记作为全局包含：

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

我使用 webpack 来构建我的主应用程序，其中我使用externals属性来指示 preact 已经可用。

externals: {
  preact: 'preact',
}

通过从 JSON API 读取列表，然后动态加载它们的 .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 挂钩的导入时，问题不会发生。由于 preact/hooks 的导入是我所做的唯一更改，我的感觉是它与此有关，这就是我卡住的地方。如何使preact/hooks全局可用以供扩展使用，因此代码不会在每个扩展中重复？

我试图将它添加到 microbuild 命令中的 globals 标志中，但没有成功。

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

0 回答 0