在没有服务器的情况下运行 React 应用程序

Posted 2023-02-21

技术标签:

【中文标题】在没有服务器的情况下运行 React 应用程序【英文标题】：Run React application without server 【发布时间】：2017-03-13 12:45:18 【问题描述】：

在问我的问题之前，我想告诉你，我对 react 很陌生，到目前为止，我已经学习了 react 的非常基本的概念，例如组件、状态、道具、路由器等。可能这个问题很有趣，但我需要解决方案。如果我在某个地方错了，请纠正我。

所以我的问题是，我们可以运行基于反应的应用程序而不在服务器上运行应用程序吗？基本上，我想要那个，我可以直接在网络浏览器上使用 index.html 文件路径，我的应用程序开始工作。

我的理解是 React js 是一个 javascript 库，所有代码最终都使用 babel loader 转换为纯 javascript 文件（如果我们使用的是 ES6）。所以我认为应该可以做到这一点。

我发现我可以使用 webpack，它在内部首先将我的基于 React 或其他 js 文件转换为普通 javascript，然后制作一个可以在 Index.html 文件中使用的单个捆绑文件以供进一步使用.我已经尝试过了，但只有一些功能可以正常工作，例如 state、prop，但许多其他功能不能像 react-router 一样工作，但是当我使用 npm 服务器时，所有功能都可以正常工作。

现在我为什么要这样做是因为我想使用 react js 来创建 Samsung Tizen TV Web 应用程序，我不认为我可以使用 npm 服务器等。

如果有人对此有任何解决方案，那将非常有帮助。谢谢

【问题讨论】：

请在投反对票前留下评论你想好怎么做了吗？ @ReyanshMishrav 不，我没有尝试更多。将此添加到您的 packae.json "homepage": "./" 【参考方案1】：

这几个概念基本上就是你所需要的（加上lifecycles methods）。这就是为什么 React 如此出色，它很容易思考和推理，即使您拥有庞大而复杂的应用程序。

React 可以在没有服务器的情况下工作，只需添加脚本标签并确保您使用当前浏览器能够理解的 JavaScript 或下载 React 源代码并在任何讲 JS 和具有 DOM 的地方使用它。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

例如，Firefox 将 React 用于他们的新开发工具，这里的提示可以为您节省很多时间：在 React 中使用内联样式非常容易，我想不出更好的工具设计您的电子邮件模板。

【讨论】：

我想，我做错了什么。我正在做的是首先我使用 webpack 创建一个捆绑 js 文件，然后我使用该 js 文件在浏览器上运行如果您使用import 或require React，则不需要脚本标签，它已经存在。如果你想检查，我可以把我的虚拟项目发给你【参考方案2】：

我现在遇到了同样的问题，默认的react/react-router 应用程序。而react-router 在使用BrowserRouter 时也对我不起作用。但我发现issue 建议将BrowserRouter 更改为HashRouter。它解决了我的问题。为了在模拟器上启动应用程序（实际上，我正在为 webOS 编写），我将 index.html 中的 script 标签中的 src 更改为我的构建位置。

【讨论】：

【参考方案3】：

在构建之前，我在 package.json 中添加了以下内容：

"homepage": "./",

构建时反应终端输出的引用：

该项目是在假设它托管在服务器根目录的情况下构建的。要覆盖它，请在 package.json 中指定主页。例如，添加这个来为 GitHub Pages 构建它：

“主页”：“http://myname.github.io/myapp”，

注意：我很确定这不适用于每个项目。

【讨论】：

这非常适合使用 file:/// 协议字符串生成在文件系统上运行的简单应用程序。【参考方案4】：

“主页”：“。” 使用它在没有 Web 服务器的情况下工作。它对我的工作非常好。

【讨论】：

【参考方案5】：

// 这是我在 Tizen Studio 上运行 React 应用程序的代码 tizen 中的 index.html .. 运行 react 应用程序并像我一样添加一个 IP 地址:)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/style.css" />
    <script src="main.js"></script>

</head>
<body> 

   <script>
       window.open("http://1.1.1.1:4000")
   </script>


</body>
</html>

配置xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/HelloWorld" version="1.0.0" viewmodes="fullscreen">
  <tizen:application id="7bo2fXhVaD.HelloWorld" package="7bo2fXhVaD" required_version="2.3"/>
        <access origin="*" subdomains="true"></access>

    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>AnalyticsTesting</name>
    <tizen:profile name="tv-samsung"/>

    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.display"/>
    <tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/volume.set"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>

 <tizen:setting pointing-device-support='disable' />
    <tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

【讨论】：

请解释为什么这会起作用以及它解决了什么问题。您可以在本地环境中运行 React 应用程序，然后使用您的本地 IP 在带有 Tizen Studio 的 SamsungTV 上运行 - 您也可以在 Tizen 的调试器中运行，看看它是如何在电视上运行的。有了这个，你可以在电视上运行任何 react 应用程序，看看它是如何使用简单的本地 IP 工作的 :) 我希望它会有所帮助......我正在努力为 SamsungTV 构建一个应用程序，有时真的很痛苦和沮丧跨度> 【参考方案6】：

以下更改对我有用：

package.json

"homepage": "."

BrowserRouter

HashRouter

react-router

（了解BrowserRouter 和HashRouter here 之间的区别）

进行这些更改后，请执行以下操作以在没有任何服务器的情况下运行应用程序：

yarn run build

npm run build

build/index.html

【讨论】：