logo标签列表

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

javascriptreactjsreact-routertizentizen-web-app
45
在问问题之前，我想告诉你我对React非常陌生，到目前为止我只学习了一些基本概念，例如组件、状态、属性和路由等等。也许这个问题很幼稚，但我需要解决方案。如果我哪里说错了，请纠正我。

所以我的问题是，我们可以在不运行服务器的情况下运行基于React的应用程序吗？基本上，我希望能够直接在Web浏览器中使用index.html文件路径，并且我的应用程序开始工作。

我的理解是，React js是一个javascript库，所有代码最终都会使用babel loader（如果我们使用ES6）转换为普通的javascript文件。因此，我认为这应该是可行的。

我发现我可以使用webpack，它在内部首先将我的基于React或其他js文件转换为普通的javascript，并生成一个单一的捆绑文件，可以在Index.html文件中进一步使用。我尝试过这个方法，但只有一些功能能够正常工作，例如状态和属性，但许多其他功能无法正常工作，例如react-router，但当我使用npm服务器时，所有功能都能正常工作。

现在我为什么要这样做是因为我想使用React js来创建三星Tizen电视Web应用程序，在那里我不认为我可以使用npm服务器等等。

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

6
在给出负评之前，请留下评论。 - Vikas Verma
你搞明白该怎么做了吗？ - Reyansh Mishra
@ReyanshMishrav 不，我没有尝试更多。 - Vikas Verma
请将以下内容添加到您的 package.json 文件中： "homepage": "./" - mercury
7个回答
41
我在构建之前在package.json中添加了以下内容：
"homepage": "./",

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

该项目的构建假定它托管在服务器根目录下。 要覆盖这一点，请在您的 package.json 中指定主页。 例如，将以下内容添加到 build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

注意：我相信这并不适用于所有项目。

2
这对于生成简单的应用程序，并使用 file:/// 协议字符串在文件系统上运行非常有效。 - josh.chavanne
14
以下更改对我有用：
  1. 在package.json中添加"homepage": "."键值。
  2. 将BrowserRouter替换为HashRouter，两者都从react-router导入。
（关于BrowserRouter和HashRouter之间的区别，请在这里阅读。） 进行这些更改后，执行以下操作以在没有任何服务器的情况下运行应用程序：
  1. 运行yarn run build或npm run build创建应用程序的生产生成版本。
  2. 在浏览器中打开build/index.html。
完成这一步后，它会找到主要的js和css文件，但是当它尝试访问路径为“'file:///home...”的文件时，我会遇到CORS错误。我已经阅读过，不能直接在浏览器中打开html使用这些应用程序，而是需要一个服务器。 - raquelhortab
1
对于那些使用AJAX调用后端Web服务器的人来说，你将会生成没有来源（null）的请求，因为我的应用程序正在与本地运行的Node Web服务进行通信，所以我只接受了CORS地址“null”在允许的来源数组中。 - ben
非常感谢，这个真的很简单，但是我自己不会，你的帮助真的对我很有帮助！ - undefined
12

这些基本概念基本上就是你所需要的全部（还有生命周期方法）。这就是为什么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文件。 - Vikas Verma
如果你使用 import 或 require 导入 React，就不需要使用 script 标签了，因为它已经存在了。 - Solo
如果您想检查，我可以将我的虚拟项目发送给您。 - Vikas Verma
5
我现在遇到了同样的问题，使用默认的react/react-router应用程序。当我使用BrowserRouter时，react-router也不能正常工作。但是我发现了一个issue，建议将BrowserRouter更改为HashRouter。这解决了我的问题。为了在模拟器上启动应用程序（实际上，我正在为webOS编写），我将index.html中script标签中的src更改为我的构建位置。
2

"homepage":"."

可以用于在没有Web服务器的情况下工作。这对我非常有效。"Original Answer"翻译成"最初的回答"。
0

我正在使用独立的Babel（JSX），它运行得非常顺畅https://babeljs.io/docs/en/babel-standalone

<div id="output"></div>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Your custom script here -->
    <script type="text/babel">
      const getMessage = () => "Hello World";
      document.getElementById("output").innerHTML = getMessage();
    </script>
</div>
-1

// 这是我在 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>
请添加解释为什么这个会起作用以及它解决了什么问题。 - MaartenDev
您可以在本地环境中运行React应用程序，然后使用本地IP在Tizen Studio上运行SamsungTV - 您还可以在Tizen的调试器中运行并查看其在电视上的运行情况。通过这种方式，您可以仅使用简单的本地IP在电视上运行任何React应用程序并查看其工作原理 :) 希望能对您有所帮助...我正在为SamsungTV构建一个应用程序，有时候真的很痛苦和沮丧。 - Slav3dev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接