Question

背景

我有一个使用create-react-app生成的React应用。它是一组UI表单，旨在以模拟方式呈现在托管网站中。托管网站提供了一个完成时调用的JS回调。

动机

我希望能够将这个小型React应用程序作为独立版＆＃34; vanilla＆＃34; JS模块，可以嵌入任何HTML页面。我现在所拥有的是运行npm run build并使用我的应用获得一个完整的网站 - 但这不是我需要的。理想的输出应该是一个简单的.js文件，可以导入到其他网站（不一定是用React构建）。 Braintree's JS SDK是我需要的一个非常好的例子。

托管网站的使用示例

<head>
    <!-- loading MyModule -->
    <script src='https://cdn.mydomain.com/mymodule.js' some-parameter='param-provided-by-hosting-website'></script>
</head>

<body>
    <div id="mymodule-container"></div>


    <!-- rest of hosting website... -->


    <script>
        // this will present a "full screen" UI component and call callback upon completion
        MyModule.presentUI(
            function callback() {
                console.log('MyModule completed');
            }
        );
    </script>
</body>

不考虑所有内部结构和考虑因素，如何将我的React应用程序（包括其.css文件）捆绑为在另一个网站内运行的.js文件？

更新

显然正在运行npm run build输出，其中包括static/main*****.js文件，这是所有JS内容。 index.html文件实际上是如何将该.js文件用作模块的一个很好的例子：

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>My Hosting App</title>
    <link href="/static/css/main.1695e3be.css" rel="stylesheet">
</head>
<body>
    <div id="my-module-container"></div><script type="text/javascript" src="/static/js/main.0b4c7736.js"></script>
</body></html>

现在要问的是如何加载.css（来自内置生成的static/main******.css文件和.js文件，而不会使托管网站也添加<link>标记到RSS（就像在输出中index.html。基本上在生成的.js文件中发生this。

Answer 1

我不能说如何在没有某种标准的情况下实现这一目标。 API，您的所有模块都可以遵循。

我们尝试用FrintJS（https://frint.js.org）做类似的事情，使用＆＃39; region＆＃39;的概念。

您可以定义您希望自己的应用程序（根据您的问题的模块）安装的某些区域，并且可以通过单独的<script>标记按需异步加载它们。

您可以在这里阅读更多内容：

将React应用程序构建为模块化JS库

背景

动机

托管网站的使用示例

更新

1 个答案: