reactjs - 从URL动态加载React组件库？

Question

我正在开发 Typescript 库的文档工具。这个想法是利用 Parcel 的监视模式持续构建库，并在预构建的文档应用程序中使用相同的库。

同样，我需要通过 URL 动态加载模块库(在另一个项目中构建)。

<script type="module">
    const libraryModule = "http://localhost:8080/lib.module.js";
    const promise = import(libraryModule);

    promise.then(library => {
        // do something with library
        window.ComponentLibrary = library;
    });
</script>

但是parcel将上面的import替换为require，加载失败。使用System.import会抛出系统未定义错误。

我尝试使用dynamic-import-polyfill，然后将其初始化如下并使用如下:

dynamicImportPolyfill.initialize({
    modulePath: 'http://localhost:13090', // Defaults to '.'
    importFunctionName: '$$import' // Defaults to '__import__'

    const promise = $$import(libPath);
});

这会引发以下错误:

TypeError: Failed to resolve module specifier "react/jsx-dev-runtime". Relative references must start with either "/", "./", or "../"

我也尝试过使用 script 类型作为 text/javascript 但也不起作用。

正在寻找有关加载组件库的最佳方法的指导吗？

Answer 1

弄清楚了:是的，我们可以动态地将组件库作为模块加载。

问题是 React UMD 模块不是纯 ES/Javascript 模块。此外，在 React 17 中，JSX 组件是从 react/jsx-runtime 中选取的。因此，首先我必须将 React UMD 模块转换为 ES 模块 - 它只是一个薄包装。同样，添加了 jsx-runtime 的包装器。为了使事情正常工作，必须使用目前并非所有浏览器都支持的 importmaps - 请参阅 caniuse.com查看最新支持。

这完成了您的设置，现在编译为 ES 模块的库将可以正常工作。以下是我以前的工作内容:

<script type="importmap">
        {
            "imports": {
                "react/jsx-runtime": "/react-jsx-runtime.js",
                "react": "/react-as-es-module.js"
            }
        }
    </script>
    <script type="module" src="/component-library.js"></script>
    <script type="module">
        import * as MyComponentLib from "/component-library.js";
        window.ComponentLibrary = { ...MyComponentLib };
    </script>

react-jsx-runtime.js 的代码如下所示:

import * as React from 'react';

export const jsx = React.createElement;
export const jsxs = React.createElement;

react-as-es-module.js 的代码如下:

import 'https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1466717577605425233a243a26" rel="noreferrer noopener nofollow">[email protected]</a>/umd/react.production.min.js';

const {
    Children,
    Component,
    Fragment,
    // and all other exports
} = React || {};

export {
    Children,
    Component,
    Fragment,
    // and all other exports
}

export default React;

我使用 ParcelJS 编译了 component-library.js使用 package.json 文件中的 type: "module" 。我很快会在博客文章和演示 Github 存储库中详细介绍这一点。

希望这有帮助。